D3包布局具有可变填充 [英] D3 pack layout with variable padding

问题描述

我无法使用d3.layout.pack().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.

谢谢，安奇

推荐答案

请考虑以下结构:

<svg>
 <g class="content-group">
</svg>

步骤1:使用半径"访问器将最小半径设置为某个恒定值.

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

第2步:在第1步之后，分组的圆会变大，因为半径为分组的圆是填充+内圆所占据的空间

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

第3步:使用height和width属性，使用height和width属性设置ViewPort，绘制内容后，使用d3.select('g.content-group')获取g.content-group的边界框.node().bbox()，这将为您提供x，y，height，width.可以用来设置viewbox ="x y width height"的属性

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"

将视口设置为widthVP * heightVP，并将viewBox设置为"xy width height"，然后新坐标系将具有等于x方向上的widthVP/width和y方向上的heightVP/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.

谢谢，安奇

这篇关于D3包布局具有可变填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！