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)
        .size([this.width , this.height])
        .children(function (d) {
            return d.values;
        })
        .value(function (d){
            return 1;
        })
        .padding(function (d){
            return d.padding;
        })
        .nodes({
            values: outerClusterData
        })


        // Sample data 
        outerClusterData = [
            {
                key: "africa",
                padding: 100,
                values: [
                    {
                        name: "city1",
                        padding: 10
                    },
                    {
                        name: "city2",
                        padding: 10 
                    }
                ]
            },
            {
                key: "India",
                padding: 100,
                values: [
                    {
                        name: "city3",
                        padding: 10
                    },
                    {
                        name: "city4",
                        padding: 10 
                    }
                ] 
            }
        ]

Above is the my code. Any help will be greatly appreciated.

Thanks, Ankit

回答1:

Consider the structure as following:

<svg>
 <g class="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

来源：https://stackoverflow.com/questions/50470731/d3-pack-layout-with-variable-padding

标签

javascript

d3.js

pack