Question

这是this question的后续行动。

我已设法使用Mike Bostock在this JSFiddle中找到的部分代码添加original hierarchical edge bundling中元素之间的链接，并将它们添加到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 。

Answer 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/

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

1 个答案: