D3.js binding an object to data and appending for each key
- by frshca
I'm a D3.js newbie and I'm learning how to play around with data.
Let's say I have an object with names as keys, and each key has an array of numbers like this:
var userdata = {
'John' : [0, 1, 3, 9, 8, 7],
'Harry': [0, 10, 7, 1, 1, 11],
'Steve': [3, 1, 4, 4, 4, 17],
'Adam' : [4, 77, 2, 13, 11, 13]
};
For each user, I would like to append an SVG object and then plot the line with the array of values for that user.
So here is my assumption of how that would look based on tutorials, but I know it is incorrect. This is to show my limited knowledge and give better understanding of what I'm doing:
First I should create the line
var line = d3.svg.line().interpolate('basis');
Then I want to bind the data to my body and append an svg element for each key:
d3.select('body')
.selectAll('svg')
.data(userdata)
.enter()
.append('svg')
.append(line)
.x(function(d, i) { return i; })
.y(function(d) { return d[i]; });
So am I close??
