D3 line acting as a closed path

d3.js, javascript, line

Solution

Paths are filled by default. If you set `fill` to "none" and `stroke` to "black" you'll see that the path is not closed, it just appeared to be.

Working fiddle: http://jsfiddle.net/Hffks/3/

Problem

Update: Here's an example of the issue - http://jsfiddle.net/Hffks/2/ I'm trying to use D3 to code a line graph and my line is being closed at the end, by which I mean it acts as a closed path where the first and last points are the same. My data comes in the following JSON format: ``` [ entityA : [ { time : 1230000, // time since epoch attribute1 : 123 // numeric value attribute2 : 123 // numeric value }, { time : 1230010, // time since epoch attribute1 : 123 // numeric value attribute2 : 123 // numeric value } ], entityB : [ { ... // same format as above ... ] ``` I'm using a standard declaration of a line (d3.svg.line with a function for x and y): ``` var line = d3.svg.line() .x(function(d) { return x_scale(d.c_date)); }) .y(function(d) { return y_scale(d.total); }); ``` Then inside a for loop that iterates over the entities I'm appending a "svg:path": ``` canvas.append("svg:path") .attr("d", line(data[entity])) ``` Everything else about the graph works: the points are correctly placed, I have multiple independent lines per entity, the axes are drawn, etc. However, each independent line acts as a closed path. Thanks for in advance for any help!

Original source