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")
var rects = groups.selectAll("rect")
   .data(function(d) { return d.values })

Related Query