Javascript 作为闭合路径的D3线

更新：以下是一个问题示例-

我试着用D3来编码一个线图，我的线在最后是闭合的，我的意思是它作为一个闭合的路径，第一个点和最后一个点是相同的。我的数据采用以下JSON格式：

[ 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的函数）：

然后在遍历实体的for循环中，我附加了一个“svg:path”：

关于图形的其他一切都是有效的：点被正确地放置，每个实体有多条独立的线，轴被绘制，等等。然而，每条独立的线作为一条闭合的路径

---

提前感谢您的帮助

默认情况下，路径是填充的。如果将

fill

设置为“无”，并将

stroke

设置为“黑色”，您将看到路径没有关闭，只是看起来是关闭的

工作小提琴：

我的代码如下：

var width = 400;
var height = 400;

var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);


//The data for our line
var lineData = [{
    "x": 1,
    "y": 5
  },
  {
    "x": 20,
    "y": 20
  },
  {
    "x": 40,
    "y": 10
  },
  {
    "x": 60,
    "y": 40
  },
  {
    "x": 80,
    "y": 5
  },
  {
    "x": 100,
    "y": 60
  }
];

//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveLinear)(lineData))
    //.curve(d3.curveBasis)(lineData)) //Draws smooth joints- yumuşak birleşim noktası(mafsal) çizer
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

---

您可以在此处查看d3版本5.9.2:

它不应该自行关闭路径。你能提供一个完整的小例子吗，例如at？这里是我所做的：它实际上并没有创建一个封闭的路径，只是默认地填充它。如果显式设置“填充”和“笔划”，则可以看到单独的线条。这就是你要找的吗？对我觉得有点傻，因为我以为我已经试过了。但是在示例中，我看到没有人明确地将fill设置为none。不用担心：）我会将我的评论转换为答案。谢谢@lars kotthoff，你的建议真的很有帮助。作为D3和SVG渲染的初学者，一般来说，这种事情真的不明显，哈哈。我很高兴我找到了你的解决方案。

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

var width = 400;
var height = 400;

var svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height);


//The data for our line
var lineData = [{
    "x": 1,
    "y": 5
  },
  {
    "x": 20,
    "y": 20
  },
  {
    "x": 40,
    "y": 10
  },
  {
    "x": 60,
    "y": 40
  },
  {
    "x": 80,
    "y": 5
  },
  {
    "x": 100,
    "y": 60
  }
];

//The line SVG Path we draw
var lineGraph = svg.append("path")
  .attr("d", d3.line()
    .x(d => d.x)
    .y(d => d.y)
    .curve(d3.curveLinear)(lineData))
    //.curve(d3.curveBasis)(lineData)) //Draws smooth joints- yumuşak birleşim noktası(mafsal) çizer
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");