D3 Pack Layout With Variable Padding

I am not able to get variable padding using d3.layout.pack().padding(). I want to put different padding at group and at leaf nodes. d3.layout.pack() .sort(null)

Solution 1:

Consider the structure as following:

<svg><gclass="content-group"></svg>

Step 1: Set the minimum radius using radius accessor to some constant value.

Step 2: After Step 1, The grouped circle will be quiet large, as radius of the grouped circle is padding + space occupied by inner circles

Step 3: Set ViewPort using height and width, using height and width attribute, Once the content is drawn, Get the bounding box of g.content-group, using d3.select('g.content-group').node().bbox(), This will give you x,y,height,width. Which can be used to set the attributes of viewbox = "x y width height"

Lets the viewport be widthVP * heightVP, and viewBox be "x y width height", Then the new coordinate system will have unit which will be equal to widthVP/width in x direction and heightVP/height in y direction.

Thanks, Ankit