javascript - 具有可变填充的 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步之后，分组的圆将变得非常大，半径为 分组的圆是内边距+内圆占用的空间

第3步:使用高度和宽度设置ViewPort，使用高度和宽度属性，一旦内容绘制完毕，获取g.content-group的边界框，使用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 和 y 方向的 heightVP/height。