具有可变填充的 D3 包布局

Question

我无法使用 d3.layout.pack().padding() 获得可变填充。我想在组和叶节点处放置不同的填充。

        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 
                    }
                ] 
            }
        ]

以上是我的代码。任何帮助将不胜感激。

谢谢，安琪

Answer 1

考虑如下结构：

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

第 1 步：使用半径访问器将最小半径设置为某个常数值。

第2步：经过第1步，分组的圆圈会变大，半径为分组圆是填充 + space 被内圆

占据

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

设viewport为widthVP * heightVP，viewBox为"x y width height"，则新坐标系的单位在x方向等于widthVP/width，在x方向等于heightVP/height y方向.

谢谢，安琪

具有可变填充的 D3 包布局

D3 pack layout with variable padding

javascript

pack

d3.js