D3.js：在折叠/展开时更新径向树中元素之间的链接答案

【问题标题】：D3.js: updating links between elements in a radial tree upon collapse/expandD3.js：在折叠/展开时更新径向树中元素之间的链接
【发布时间】：2017-04-11 09:15:21
【问题描述】：

这是对this question的跟进。

我已经设法使用 Mike Bostock 在original hierarchical edge bundling 中找到的部分代码在this JSFiddle 中的元素之间添加链接，并将它们添加到collapsible tree 的径向版本中：

var bundle = d3.layout.bundle();

var line = d3.svg.line.radial()
    .interpolate("bundle")
    .tension(.85)
    .radius(function(d) { return d.y; })
    .angle(function(d) { return d.x / 180 * Math.PI; });

var middleLinks = packageImports(root);

svg.selectAll("path.middleLink")
          .data(bundle(middleLinks))
        .enter().append("path")
          .attr("class", "middleLink")
          .attr("d", line);

“packageImport”功能可以在底部找到。

我现在尝试在折叠/展开元素时更新这些链接，但我不知道该怎么做。可能与以下部分或位置发生变化时更新函数内部的部分有关：

function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }

  update(d);
}

另外值得一提的是，删除以下行会产生另一个正确的布局，没有子项折叠：

root.children.forEach(collapse);
update(root);

为此我不明白为什么点击功能后的更新没有考虑到新的布局。

随时编辑JSFiddle。

另一种可能性是内层不移动并且始终设置为所有展开尺寸的间距，因此第二层只会出现或消失，不会改变第一层并且仍然适合。您可能会建议将此解决方案作为答案，但它仍然是 B 计划。

【问题讨论】：

标签： javascript css d3.js tree geometry

【解决方案1】：

您实际上并没有更新它们的值。以下代码所做的只是更新您没有的新链接，

svg.selectAll("path.middleLink")
.data(bundle(middleLinks))
.enter().append("path")
.attr("class", "middleLink")
.attr("d", line);

您可以通过更新现有链接和新链接来纠正此问题，

var middle = svg.selectAll("path.middleLink")
  .data(bundle(middleLinks));
middle.enter().append("path")
  .attr("class", "middleLink")
  .attr("d", line);
middle.attr("d", line);

https://jsfiddle.net/1mgw37tk/

【讨论】：