Question

我正在使用这个JS小提琴：http://jsfiddle.net/f1nzagyw/

我想将示例从对角线更改为直线，这是我能够做到的，但是当我点击某个节点展开或缩短图形时，旧的链接不会从图形中删除，所以我最终得到了多个链接。有人可以建议我如何使用直线转换原始链接与转换节点？当我从对角线移动到直线时，它似乎发生了变化。

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

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

我还附加了＆＃34; line＆＃34;和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; });

此外，将链接保留在节点后面的最佳方法是什么，以便链接在节点后面运行，而不是在前面？我以为我只需要在节点上方放置链接的代码，但这似乎并没有起作用。

感谢任何帮助。感谢

Answer 1

问题1

旧链接未获得更新

你在做：

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

这是错误的，因为没有path DOM有一个line 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);

工作代码here

修改

确保节点总是在顶部组成两个组。

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); });

工作示例here

D3树图 - 如何在使用直线而非对角线时转换链接

1 个答案: