D3 lines getting rendered as polygons

d3.js, data-visualization, javascript

Solution

Try setting `fill` and `stroke` explicitly when appending the path, i.e.

d3.select("svg")
  .append("path")
  .attr("fill", "none")
  .attr("stroke", "black")
  .attr("d", line(data));

Problem

I am trying to use D3 to render lines, but when I try to do this, the lines get rendered as polygons. I am not sure why. I included a screenshot to show you what it looks like. Here is the code: ``` // Creates a time scale using the x_extent // defined above var x_scale = d3.time.scale() .range([margin, width - margin]) .domain(x_extent); // Creates a similarity scale using the y_extent. // defined above. var y_scale = d3.scale.linear() .range([height - margin, margin]) .domain(y_extent); // Construct a line. var line = d3.svg.line() .x(function(d) { return x_scale(d.date); }) .y(function(d) { return y_scale(d.similarity); }); // Render a line. d3.select("svg") .append("path") .attr("d", line(data)); ```

Original source