D3线作为闭合路径 [英] D3 line acting as a closed path

问题描述

更新：以下是此问题的示例： http://jsfiddle.net / Hffks / 2 /

Update: Here's an example of the issue - http://jsfiddle.net/Hffks/2/

我想使用D3来编写折线图，我的线在结尾处被关闭，我的意思是它充当封闭路径，其中第一点和最后点是相同的。我的数据采用以下JSON格式：

I'm trying to use D3 to code a line graph and my line is being closed at the end, by which I mean it acts as a closed path where the first and last points are the same. My data comes in the following JSON format:

[ entityA : [ { time : 1230000,  // time since epoch
             attribute1 : 123 // numeric value 
             attribute2 : 123 // numeric value
            },
              { time : 1230010,  // time since epoch
              attribute1 : 123 // numeric value 
              attribute2 : 123 // numeric value
            } ],
  entityB : [ { ... // same format as above
  ...
 ]

我使用一行的标准声明（d3.svg.line带有x和y的函数） ：

I'm using a standard declaration of a line (d3.svg.line with a function for x and y):

var line = d3.svg.line()
        .x(function(d) {
            return x_scale(d.c_date)); 
        })
        .y(function(d) { 
            return y_scale(d.total); 
        });

然后在一个for循环中迭代实体，我添加了一个svg：path：

Then inside a for loop that iterates over the entities I'm appending a "svg:path":

canvas.append("svg:path")
            .attr("d", line(data[entity]))

图表的其他一切功能：点正确放置，

Everything else about the graph works: the points are correctly placed, I have multiple independent lines per entity, the axes are drawn, etc. However, each independent line acts as a closed path.

感谢您提供任何帮助！

推荐答案

默认情况下会填充路径。如果将填充设置为none，将 stroke 设置为black，您将看到路径未关闭，它只是出现了。

Paths are filled by default. If you set fill to "none" and stroke to "black" you'll see that the path is not closed, it just appeared to be.

工作小提琴： http ：//jsfiddle.net/Hffks/3/

这篇关于D3线作为闭合路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！