D3 Заполнение линейной диаграммы на произвольной линии

Я пытаюсь создать простую линейную диаграмму с d3, но по какой-то причине она заполняется между линией и некоторой серединой. Здесь вывод:

Line Chart

Мой javascript следующий:

        var width = 500,
            height = 500,
            padding = 10;

        var extentVisits = d3.extent(visits, function(obj){
            return obj['visits'];
        });

        var extentDates = d3.extent(visits, function(obj){
            return obj['datestamp'];
        });

        var yScale = d3.scale.linear()
            .domain(extentVisits)
            .range([height - padding, padding]);

        var xScale = d3.time.scale()
            .domain(extentDates)
            .range([0, width]);

        var line = d3.svg.line()
            .x(function(d) {
                return xScale(d['datestamp']);
            })
            .y(function(d) {
                return yScale(d['visits']);
            })

        d3.select('#chart')
            .append('svg')
            .attr('width', width)
            .attr('height', height)
            .append("g")
            .attr("transform", "translate(5,5)")
            .append('path')
            .datum(visits)
            .attr("class", "line")
            .attr('d', line);

Если посещения имеют форму:

        visits = [{'datestamp': timestampA, 'visits': 1000},
                  {'datestamp': timestampB, 'visits': 1500}]

Я новичок в d3, поэтому я уверен, что это что-то простое, но это сводит меня с ума.

Спасибо заранее.

Ответы

Ответ 1

Средняя точка, которую вы видите, - это просто соединение первой и последней точки. Это связано с тем, что созданный вами путь имеет (по умолчанию) черную заливку. Хотя это открытый путь (т.е. Первая и последняя точка на самом деле не связаны), если он заполнен, он будет закрыт:

Операция заполнения заполняет открытые подпуты, выполняя операцию заполнения, как если бы добавлена ​​дополнительная команда "closepath", чтобы связать последнюю точку подпути с первой точкой подпути.

Источник: спецификация SVG через этот ответ SO

Решение здесь состоит в том, чтобы устранить заливку и вместо этого установить штрих. Вы можете сделать это непосредственно в JS с помощью d3 или через CSS.

path.line
{
    fill: none;
    stroke: #000;
}

Демонстрация как метода CSS, так и JS (закомментирована) на jsFiddle