CODEWITHSUNDEEP
d3.jscircle-pack
santoku
santoku

Reputation: 3427

how to control size of bubble in circle packing layout in d3

in an animated circle packing d3 chart like this https://bl.ocks.org/HarryStevens/54d01f118bc8d1f2c4ccd98235f33848

The bubble will always size to fill the rectangle drawing canvas. Is there a way to fix the size to be consistent such that I can make the bubble growing smaller? enter image description here

meanwhile because it'll scale up, even if passing in smaller value, the radius doesn't really get smaller.

for example: if data switched from [{"a",40}, {"b",50},{"c",60}] to [{"a",4}, {"b",8},{"c",10}], ideally the circle get proportionally smaller.

how to control the scale? thanks.

Upvotes: 1

Views: 2073

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

d3.pack() has a method called size. According to the API:

If size is specified, sets this pack layout’s size to the specified two-element array of numbers [width, height] and returns this pack layout.

So, for instance, in the bl.ocks you shared we can do...

.size([width/2, height/2])

... to reduce the packing area.

Have a look at this updated bl.ocks, I put a rectangle to show the reduced area and a lavender background in the SVG: https://bl.ocks.org/GerardoFurtado/de5ad7b9028289d290a62bc41f97f08b/880ec47cbfa236bb05e96b8e22dbe05e9bdf140d

EDIT

This is an edit addressing your edit, which is normally not a good practice in a S.O. answer, but I believe that this point is worth a clarification: changing the data doesn't matter!

In your edit you said that...

if data switched from [{"a",40}, {"b",50},{"c",60}] to [{"a",4}, {"b",8},{"c",10}], ideally the circles get proportionally smaller.

No, they won't! The layout gets the data and takes the maximum amount of the available space. For instance, even if you have an object like this:

[{name:"foo", size:1}]

This is what you'll have: https://bl.ocks.org/GerardoFurtado/0872af463ee0d786dc90f2d1361f241f/bd5357164708f09e2f130f510aea424809d9d1f1

Upvotes: 1

Related Questions