svg - d3js 多点线显示为闭合形状

Question

我正在尝试生成一条通过多个点的线。

var line = d3.svg.line()
    .x(function(d){return d[0];})
    .y(function(d){return d[1];})
    .interpolate("basis");

var data = [[10,20],[200,100],[80,120], [40, 80]];

svg.append("path")
    .attr("stroke", "black")
    .attr("stroke-width",1)
    .attr("d", line(data));

Line(outline) 绘制正确，但不是曲线，而是显示闭合形状。

完整代码在http://jsbin.com/inehon/2

我在这里做错了什么？

Answer 1

没问题，您只需要禁用填充（根据定义，填充是一个封闭的形状）。

svg.append("path")
  .attr("stroke", "black")
  .attr("fill", "none")// <--- THIS
  .attr("stroke-width",1)
  .attr("d", line(data));

如果您愿意，也可以通过 CSS 实现这一点

svg path {
  fill: none;
  stroke: black;
}