Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3 line acting as a closed path

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!

like image 414
user1872632 Avatar asked Dec 03 '12 13:12

user1872632


1 Answers

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/

like image 99
Lars Kotthoff Avatar answered Sep 28 '22 10:09

Lars Kotthoff