I want to make a pack layout with D3, but I want it to adjust to a screen size (height & width, which are not necessarily the same).
So, to start off with, I'm making the following:
Jsfiddle 1 on line 15, I set
var width = 600, height = 300;
which gives me this result:
I set a width of twice the height, and the (blue) bounding box gets it, however, the (red) bounding circle does not. Next step, I transform the bounding circle:
Jsfiddle 2 on line 32, I set
return "translate(" + d.x + "," + d.y + ")scale(2,1)";
which gives me this result:
Now the (red) bounding circle does what I want it to do, but its children stay within a perfect circle. What I want to create is something like this:
How? If not with a regular D3 method, I'm willing to use a hack.
=== Two similar SO questions ===
D3 - How to convert circle-pack to ellipse-pack? ==> This one makes the children ellipses as well, I don't want that. I also tried fixing the children but they don't get to fit nicely in the ellipse either.
Packing different sized circles into rectangle - d3.js ==> Although this one has some great answers, trying to solve the problem from scratch, it's about fitting the circles in a rectangle, and moreover, answers are not using D3.