CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
Aakash Thakkar
Aakash Thakkar

Reputation: 321

How to set Minimum Radius for Circle Pack in D3JS?

Can anyone guide me how I can modify https://bl.ocks.org/mbostock/4063269, in a way that the circles have a minimum radius?

If the circles have a really small radius their inner text is hidden, which I would like to avoid.

Upvotes: 3

Views: 1238

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

You can set the minimum size of the circles using different approaches. This answer deals with pack.radius:

If radius is specified, sets the pack layout’s radius accessor to the specified function and returns this pack layout.

First, we set a scale. You can see that the minimum value here is 20 (and the maximum is 50):

var sizeScale = d3.scaleSqrt()
   .range([20,50]);

Then, we use that scale in pack.radius:

pack.radius(d=>sizeScale(d.value));        

Here is a demo using the same code you linked, from Mike Bostock: https://bl.ocks.org/anonymous/9590a06db119c7a67acdfd3c5b5f1e0a

Upvotes: 3

Related Questions