Question

I’m trying to generate a line passing through multiple points.

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) is drawn correctly, but instead of a curved line, a closed shape is displayed.

Complete code is at http://jsbin.com/inehon/2

What am i doing wrong here?

Answer 1

No problem, you just need to disable the fill (which by definition is a closed shape).

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

You can achieve this via CSS as well, if you prefer

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