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

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

谢谢， ANKIT

Answer 1

考虑以下结构：

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

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

步骤2：在步骤1之后，分组的圆圈将是安静的大半径分组圆是填充+内圈占据的空间

步骤3：使用高度和宽度设置ViewPort，使用height和width属性，绘制内容后，使用d3.select（'g.content-group'）获取g.content-group的边界框。 node（）。bbox（），这将给你x，y，height，width。可用于设置viewbox =“x y width height”

的属性

让视口为widthVP * heightVP，viewBox为“xy width height”，然后新的坐标系将具有在x方向上宽度VP /宽度和y方向上的heightVP /高度等于的单位。

谢谢， ANKIT

带有可变填充的D3包布局

1 个答案: