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

線(輪郭)は正しく描かれているが、曲線ではなく閉じた形が表示される。

完全なコードは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;
}