score:1

Accepted answer

You could loop through the values array in each top-level object and keep a running total of value, which becomes y0 for each <rect>. y1 then is y0 + value.

Then bind each top-level object to a <g> tag representing the entire stack, translate that to the appropriate x position (assuming bars are vertical), and append <rect>s to each <g> with the values prop as data. Set the height and y position of the rect according to where in the stack it belongs. That might look like:

var groups = d3.selectAll("g")
   .data(nested)
   .enter().append("g");
groups.attr("transform","translate...");
var rects = groups.selectAll("rect")
   .data(function(d) { return d.values })
   .enter().append("rect");
rects
   .attr("width",...)
   .attr("height",...)
   .attr("y",...)

Related Query