score:7

Accepted answer

I'd start by transforming the data into parallel arrays of the same format:

var series = ["label1", "label2"].map(function(name) {
  return data.map(function(d) {
    return {date: new Date(d._id), value: d.value[name]};
  });
});

(You can use d3.keys to compute the series names automatically, rather than hard-coding them as above.) Now series is an array of arrays. A single series, such as label1, will look something like this:

{date: new Date(2012, 7, 1, 5, 0, 0), value: 1.1208746110529344},
{date: new Date(2012, 7, 15, 5, 0, 0), value: 0.7218920737863477},
…

Since they have the same format, you can use the same line generator for all series:

var line = d3.svg.line()
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y(d.value); });

And likewise the nested array lends itself well to a data-join to create the needed path elements:

svg.selectAll(".line")
    .data(series)
  .enter().append("path")
    .attr("class", "line")
    .attr("d", line);

score:1

Try incorporating parseFloat to make absolutely sure that you are converting to floats and not to ints implicitly. If that still doesn't work, try taking substrings of your strings (chop off some precision) until it does work.


Related Query

More Query from same tag