I'm having some trouble with D3 and I'm hitting my wit's end. Essentially I have a time series graph with arbitrarily many lines and the source data can't be modified for convenience before hand (but it can be manipulated client-side).
The data is formatted thusly (with arbitrarily many labels):
object = [
{
"_id": "2012-08-01T05:00:00",
"value": {
"label1": 1.1208746110529344,
"label2": 0.00977592175310571
}
},
{
"_id": "2012-08-15T05:00:00",
"value": {
"label1": 0.7218920737863477,
"label2": 0.6250727456677252
},
....
I've tried something like:
var vis = d3.select.(element)
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.append("svg:g");
var line = d3.svg.line()
.x(function(data) {return x(new Date(data._id));})
.y(function(data) {return y(data.value);});
vis.append("svg:path")
.attr("d", line(object))
.attr("stroke", "black");
Which seems unable to access the correct value via the y accessor as I get an "error: problem parsing" and a lot of "NaNL3.384615384615385,NaNL6.76923076923077,NaNL10.153846153846155". However if I hardcode the label value via something like:
.y(function(data) {return y(data.value.label1);});
It works just fine, but only for one line. Could anyone offer help?