d3 折线图在任意线处填充答案

【问题标题】：d3 Line Chart Filling at Arbitrary Lined3 折线图在任意线处填充
【发布时间】：2013-01-23 18:34:51
【问题描述】：

我正在尝试使用 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 的新手，所以我确信这很简单，但它让我发疯。

提前致谢。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

您看到的中点只是第一个点和最后一个点的连接。这是因为您创建的路径（默认情况下）具有黑色填充。即使它是一条开放的路径（即第一个点和最后一个点实际上没有连接），如果被填充，它也会显示为封闭的：

填充操作通过执行填充操作来填充打开的子路径，就好像在路径中添加了一个附加的“closepath”命令以连接子路径的最后一个点和子路径的第一个点。

来源：SVG specification 通过this SO answer

这里的解决方案是消除填充，而是设置描边。您可以使用 d3 或通过 CSS 直接在 JS 中执行此操作。

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

Demo showing both the CSS and JS method (commented out) on jsFiddle

【讨论】：