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));

正确绘制线条（轮廓），但不显示曲线，而是显示闭合形状。

完整代码位于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;
}

d3js多点线显示为闭合形状

1 个答案: