d3在任意线上填充折线图

Question

我试图用d3创建一个简单的折线图,但由于某种原因它在线和一些中点之间填充.这是输出:

我的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很新,所以我确信它很简单,但它让我发疯了.

提前致谢.

Answer 1

你看到的中点只是第一点和最后一点的连接.这是因为您创建的路径(默认情况下)具有黑色填充.即使它是一个开放的路径(即,第一个和最后一个点没有实际连接),如果占满,就会出现关闭:

的填充操作可如同一个额外的"closepath"命令被添加到路径的子路径的最后一个点与子路径的第一点连接进行填充操作填充打开的子路径.

来源:SVG规范通过这个SO答案

这里的解决方案是消除填充,而是设置一个笔划.您可以使用d3或通过CSS直接在JS中执行此操作.

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

演示在jsFiddle上显示CSS和JS方法(注释掉)