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!
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With