向旭日版图布局d3 v4添加填充

Question

在this example之后，我正在创建一个朝阳图。我想在每个节点之间添加一些填充。这是我到目前为止的代码：

var sunburstLayout = d3.partition();

var radius = 100;
sunburstLayout.size([2*Math.PI, radius]);
//sunburstLayout.padding(2);

var arc= d3.arc()
.startAngle( function(d) { return d.x0 })
.endAngle(   function(d) { return d.x1 })
.innerRadius(function(d) { return d.y0 })
.outerRadius(function(d) { return d.y1 })

root.sum(d  => d.value);
...

产生以下结果：

现在添加时：

sunburstLayout.padding(2);

布局混乱。

sunburstLayout.padding(1);

关于如何保持布局正确同时能够向每个节点添加填充的任何建议？

Answer 1

在我看来，您刚刚发现此padding方法的局限性。如果您查看source code ...

function positionNode(dy, n) {
    return function(node) {
        if (node.children) {
            treemapDice(node, node.x0, dy * (node.depth + 1) / n, node.x1, dy * (node.depth + 2) / n);
        }
        var x0 = node.x0,
            y0 = node.y0,
            x1 = node.x1 - padding,
            y1 = node.y1 - padding;
        if (x1 < x0) x0 = x1 = (x0 + x1) / 2;
        if (y1 < y0) y0 = y1 = (y0 + y1) / 2;
        node.x0 = x0;
        node.y0 = y0;
        node.x1 = x1;
        node.y1 = y1;
    };
}

...您将看到它适用于线性距离，但不适用于径向布局，其中x和y不代表笛卡尔坐标。因此，它既可以用于冰柱，也可以用于朝阳。

一种快速而肮脏的解决方法是改为使用padAngle并在innerRadius和outerRadius中添加线性值（在innerRadius中添加值）来更改电弧生成器，然后在outerRadius中减去该值）。这给了我们

这是更新的CodePen：https://codepen.io/anon/pen/QBWMKm?editors=0010