CODEWITHSUNDEEP
javascriptd3.jssvg
chungtinhlakho
chungtinhlakho

Reputation: 930

D3.js draw line path with data array

I have a line path that takes in an array of an array like this:

[[{x:0,y:1},{X:3,y:4],[{x:0,y:2},{x:3,y:6},{x:8,y:10}]]

my line path looks like this:

this.line = D3['line']()
            .x(function (d) {console.log(d); return d.x; })
            .y(function (d) {console.log(d); return d.y; });

this works just fine, now I want modify my data so that I can include the fill and text of each one so I change my data format to look like this.

[{"data":[{x:0,y:1},{X:3,y:4]}
,"fill":"red","txt":"test","x":"0","y":0},
{data:[{x:0,y:2},{x:3,y:6},{x:8,y:10}],"fill":"red","txt":"test","x":"0","y":0}
]

I then modify the line path to look like this:

this.line = D3['line']()
            .x(function (d) {console.log(d); return d.data.x; })
            .y(function (d) {console.log(d); return d.data.y; });

looks like since the data is an object is not an array, it doesn't get loop for the path. I checked the DOM, the path did get create, just the path data never gets populated it. The code never executed the line path with it's in obj:[]. How do I past the array to it?

Thanks

Upvotes: 1

Views: 851

Answers (1)

chungtinhlakho
chungtinhlakho

Reputation: 930

ok, after messing around with a bunch of different thing, this is how I did it, i have to pass the d.data into the line function like this.

.attr("d",function(d){return self.line(d.data)})

Upvotes: 1

Related Questions