If I understood what you're asking to do, I'm pretty sure this is doable. Here's the fiddle; I added some RGB fun to help keep track of the circles.
This is done using the pack layout's sort()
method, which ensures they're laid out in a persistent order. To achieve it, I had to assign an index
value to each of the objects you declared (and the optional RGB color):
data.children.forEach(function(d, i) {
d.index = i;
d.fill = ['#c33','#3c3','#33c'][i];
});
Then it's a matter of using index
to sort:
var pack = d3.layout.pack()
.size([diameter - 4, diameter - 4])
.sort(function(a,b) { return d3.ascending(a.index, b.index); }) // <--- this
.value(function(d) { return d.size; });
Hope this helped.