D3.js d3v4可缩放树形图-如何避免子矩形的重叠？

有人能建议如何删除Martin Meier的“可缩放树映射v4（覆盖）”中树映射布局的“覆盖”方面吗？

我根据Martin的代码创建的笔：

我想Martin的树形图是基于Mike Bostock（d3v3）的可缩放树形图@

我想使用d3v4版本的各个方面作为我正在开发的d3v4树映射的基础。例如，我将进行各种更改，包括处理多个度量值，以便扩展自定义的accumulate（）

然而，如何修改Martin的树状图以实现子矩形的非重叠布局，就像Mike最初的可缩放树状图一样，这让我感到困惑

请注意，我的pen已修改为使用标准d3 flare api数据，以便能够直接比较这两个treemap实现之间的布局

---

Mike B的d3v3代码的相关摘录：

var treemap = d3.layout.treemap()
.children(function(d, depth) { return depth ? null : d._children; })
.sort(function(a, b) { return a.value - b.value; })
.ratio(height / width * 0.5 * (1 + Math.sqrt(5)))
.round(false);

### snip ###

initialize(root);
accumulate(root);
layout(root);
display(root);

function initialize(root) {
   root.x = root.y = 0;
   root.dx = width;
   root.dy = height;
   root.depth = 0;
}

// Aggregate the values for internal nodes. This is normally done by the
// treemap layout, but not here because of our custom implementation.
// We also take a snapshot of the original children (_children) to avoid
// the children being overwritten when when layout is computed.
function accumulate(d) {
    return (d._children = d.children)
    ? d.value = d.children.reduce(function(p, v) { return p + accumulate(v); }, 0)
    : d.value;
}

// Compute the treemap layout recursively such that each group of siblings
// uses the same size (1×1) rather than the dimensions of the parent cell.
// This optimizes the layout for the current zoom state. Note that a wrapper
// object is created for the parent node for each group of siblings so that
// the parent’s dimensions are not discarded as we recurse. Since each group
// of sibling was laid out in 1×1, we must rescale to fit using absolute
// coordinates. This lets us use a viewport to zoom.
function layout(d) {
    if (d._children) {
        treemap.nodes({_children: d._children});
        d._children.forEach(function(c) {
            c.x = d.x + c.x * d.dx;
            c.y = d.y + c.y * d.dy;
            c.dx *= d.dx;
            c.dy *= d.dy;
            c.parent = d;
            layout(c);
      });
  }
}

---

马丁d3v4代码的相关差异摘录：

treemap = d3.treemap()
    .size([width, height])
    .round(false)
    .paddingInner(1);
}

var root = d3.hierarchy(data)
    .eachBefore(function(d) { d.id = (d.parent ? d.parent.id + "." : "") + d.data.shortName; })
    .sum((d) => d.size)
    .sort(function(a, b) {
    return b.height - a.height || b.value - a.value; });

initialize(root);
accumulate(root);
layout(root);
treemap(root);
display(root);

function layout(d) {
    if (d._children) {
        d._children.forEach(function(c) {
        c.x0 = d.x0 + c.x0 * d.x1;
        c.y0 = d.y0 + c.y0 * d.y1;
        c.x1 *= d.x1;
        c.y1 *= d.y1;
        c.parent = d;
        layout(c);
});

---

非常感谢

我最终自己解决了这个问题。子矩形位置不正确是由于从v3布局坐标模型（x/dx，y/dy）到v4布局坐标模型（x0/x1，y0/y1）的端口不正确造成的

例子

1） 在函数rect（）中，原始v3示例的宽度/高度计算：
x（d.x+d.dx）-x（d.x）
y（d.y+d.dy）-y（d.y）

被移植到v4，如下所示：
x（d.x0+d.x1）-x（d.x0）
y（d.y0+d.y1）-y（d.y0）

我的v4修复程序：
x（d.x1）-x（d.x0）
y（d.y1）-y（d.y0）

2） 在function layout（）中，原始v3示例的宽度值：
dx

已移植到v4，如下所示：
d、 x1

我的v4补丁：
d、 x1-d.x0

工作代码在我的笔里。请参阅第二段，靠近我原始问题的顶部，查看钢笔链接

---

从您的问题中，我很难说出您所说的覆盖是什么意思，而且一般来说，如果您包含相关代码和您遇到困难的区域，而不是链接，则会更好。感谢您的快速回复。我编辑了原始帖子，添加了代码的相关部分。在Mike B的树状图中，子矩形总是彼此相邻，从不重叠。这是我希望通过d3v4版本的代码实现的。相比之下，使用Mike M的treemap，您可以看到由于不透明度而重叠的子矩形：我收集到，根据他在treemap实现版本的描述中的“覆盖”，这种行为是故意的。我创建了一支钢笔：它使用标准D3 flare api数据进行了修改（添加了'data2'并将第1490行更改为'var root=d3.hierarchy（data2）；'这使得将布局与Mike Bostock的原始（d3v3）可缩放树形图进行比较变得更容易。我正在试图找出如何将Mike m的（d3v4）树形图的布局修改为与Mike B的树形图相同。更正：我提到的“Mike m”是指“Martin m”！文本标签仍然很时髦，但我自己解决了90%的布局问题。也许这是故意的，但Mike v3的x/dx，y/dy布局坐标的移植并没有以与Martin树状图中v4的x0/x1，y0/y1坐标等效的方式完成。新笔：