d3 JSON multiple line chart

Question

I\'m trying to make a plot with multiple lines on it from a JSON blob that looks like:

{\"2007\": [{\"val\":10, \"mon\":10}, {\"val\":20, \"mon\":11}, {\"va         


        

Answer 1

Here's what worked out in case anyone else runs across this problem. The trick is to pass a function that returns the values in the associative array in the "d" attribute of the path element.

  entries = d3.entries(data);

  var colors = d3.scale.category20()
    .domain(d3.keys(data));

  var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.month) })
    .y(function(d) { return y(d.value) });

  svg1.selectAll(".line")
    .data(entries)
  .enter().append("path")
    .attr("class", "line")
    // function(d), not just line function 
    .attr("d", function(d){ return  line(d.value); })
    .attr("stroke", function(d) { return colors(d.key) });

Some help from this answer too: Using nested data with javascript D3 problem