Javascript D3树形图-如何在使用直线而不是对角线时转换链接

我正在使用这个JS小提琴：

我想将示例从对角线改为直线，我已经能够做到这一点，但当我单击一个节点以展开或缩短图形时，旧链接不会从图形中删除，因此我最终会得到多个链接。有人能告诉我如何使用直线和转换节点转换原始链接吗？当我从对角线移动到直线时，它似乎发生了变化

我添加了lineFunction，并在链接中使用它，正如您在小提琴中看到的：

     var lineFunction = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate("linear");

我还附加了“线”和x/y坐标：

 var link = svg.selectAll("path.link")
      .data(links)
      .enter().append("line")
      .attr("class", "link")
      .attr("x1", function(d) { return d.source.y; })
      .attr("y1", function(d) { return d.source.x; })
      .attr("x2", function(d) { return d.target.y; })
      .attr("y2", function(d) { return d.target.x; });

还有，保持链接在节点后面的最佳方法是什么，以便链接在节点后面而不是前面运行？我想我只需要把链接的代码放在节点上方，但这似乎不起作用

感谢您的帮助。

---

谢谢问题1

旧链接没有得到更新

你正在做：

var link = svg.selectAll("path.link")
      .data(links)

这是错误的，因为没有

路径

DOM，有一个

行

DOM，所以您的选择是错误的

你应该做：

var link = svg.selectAll(".link")
    .data(links)

问题2

将链接保留在节点后面的最佳方法：

首先创建链接，然后创建节点，这样现在链接将显示在节点后面

//create link first
link.enter().append("line")
    .attr("class", "link")
    .attr("x1", function(d) {
      return d.source.y;
    })
    .attr("y1", function(d) {
      return d.source.x;
    })
    .attr("x2", function(d) {
      return d.target.y;
    })
    .attr("y2", function(d) {
      return d.target.x;
    });

  // Transition links to their new position.
  link.transition()
    .duration(duration)
    .attr("d", lineFunction)
    .attr("x1", function(d) {
      return d.source.y;
    })
    .attr("y1", function(d) {
      return d.source.x;
    })
    .attr("x2", function(d) {
      return d.target.y;
    })
    .attr("y2", function(d) {
      return d.target.x;
    });;

  // Transition exiting nodes to the parent's new position.
  link.exit()
    .remove();
   //create nodes
  // Enter any new nodes at the parent's previous position.
  var nodeEnter = node.enter()
    .append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
      return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on("click", click);

工作代码

编辑

要确保节点始终位于顶部，请创建两个组

var svglink = svg.append("g");//add links inside this group
var svgnode = svg.append("g");//add nodes inside this group

现在，当您创建链接时，请执行此操作以确保它们位于节点下方

  // Update the links…
  var link = svglink.selectAll(".link")
    .data(links)

  // Update the nodes…
  var node = svgnode.selectAll("g.node")
    .data(nodes, function(d) {
      return d.id || (d.id = ++i);
    });

---

工作示例

@Cyril.非常感谢您抽出时间。有一件事..最初看起来链接位于节点后面，但一旦单击某个节点以展开或折叠图形，链接将再次移动到节点的前面..是否可以始终将它们保持在节点后面？当我删除折叠功能（root.children.forEach（collapse）；）时，所有这些都看起来很棒因此，整个图形立即显示，但展开/折叠会将链接推到节点前面是的，它有一个问题…修复了问题检查我的编辑部分我现在已修复：）非常感谢。我正在努力扩展您的示例，并做了一些补充，但也遇到了一些其他问题。我在这里发布了一个新问题。如果您有时间看一看，非常感谢您的帮助。再次感谢你的帮助。