D3 bind data of nested JSON document D3 bind data of nested JSON document json json

D3 bind data of nested JSON document


Here's the approach I would take. Nest the data based on the job ID and then draw the nested data. The code to do the nesting is simple, all you need is

var nested = d3.nest().key(function(d) { return d._id.job; })               .entries(data.result);

Then you can draw it like this (assuming suitable definitions of the variables omitted here).

svg.selectAll("path").data(nested)  .enter().append("path")  .style("stroke", function(d) { return color(d.key); })  .attr("d", function(d) { return line(d.values); });

Complete example here.