3

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:

enter image description here

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: enter image description here

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:

enter image description here

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.

Sventies
  • 2,314
  • 1
  • 28
  • 44
  • 1
    While you can change the outline relatively easily, the circle packing algorithm anticipates a circle - you'd have to re-write the intersection, placement, and enclosure functions in d3.pack to accommodate an ellipse for the root's children. It's probably even harder to modify the packed circles' center coordinates to make an ellipse because of the variable radii. I'd use a d3 force with forces dependent on circle radius and different forces for x and y axes with the top level children as nodes, though you would need to account for available space in the ellipse through some node scaling. – Andrew Reid Nov 23 '17 at 02:10

0 Answers0