I attempted to create a multi-line chart using nvd3, but encountered roadblocks when trying to make significant modifications. I am considering building my own chart using d3js directly, but I'm finding it challenging to grasp the concept of 'thinking in joins'.
My goal is to generate a path for each d.key along with its corresponding set of d.values.
The structure of my data for nvd3 looks like this (simplified).
[
{
"key":"brw-a",
"values":[
["2012-07-11T00:00:00", 0.0 ],
["2012-07-11T23:59:59", 0.0 ],
["2012-07-05T06:31:47", 0.0 ],
["2012-07-05T23:59:59", 0.0 ]
]
},
{
"key":"brw-c",
"values":[
["2012-07-11T00:00:00", 0.0 ],
["2012-07-07T00:00:00", 2.0 ],
["2012-07-05T23:59:59", 4.0 ]
]
}
]
It seems that I need to use an inner loop to access the array within each d.values. A working example demonstrates how d.values appears as one large unorganized chunk.
var p = d3.select("body").selectAll("p")
.data(data)
.enter().append("p")
.text(function(d) {return d.key +": " + '[' + d.values + ']'})
I feel like I'm getting closer, and it likely has something to do with:
.data(data, function(d) { return d.key; })
Update: I managed to manually iterate over the data to achieve the desired outcome. It could be that using joins may not be suitable for this task? Unless utilizing the fantastic nvd3 library, of course. Refer to the comment below for the link.
var body = d3.select("body")
for (i=0; i < data.length; i++) {
var key = data[i].key
var values = data[i].values
body.append("h3")
.text(key)
for (j=0; j < values.length; j++) {
body.append("p")
.text(values[j][0] + " -- " + values[j][1])
}
}