d3.js：modifyng树布局中的链接 [英] d3.js: modifyng links in a tree layout

问题描述

对不起我的英语...
我使用这里的例子： http ：//bl.ocks.org/mbostock/4339083
来构建一个树形图，但我改变了一个圆的根的孩子与一个矩形。
现在的图是有点凌乱，因为我看到链接通过rect。
我想要这些链接开始和停止到rect的两边。
我想我必须修改对角线路径生成器中的代码：

and sorry for my bad english... I'm using the example here: http://bl.ocks.org/mbostock/4339083 to build a tree diagram, but I changed the circles in the root's children with a rect. Now the diagram is a bit messy because the I see the links go through the rect. I want these links start and stop to the sides of the rect. I think I have to modify the code in the diagonal path generator:

    // Update the links…
var nodeLinks = tree.links(nodes);
var link = vis.selectAll("path.link")
  .data(nodeLinks, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
  .attr("class", "link")
  .attr("d", function(d) { 
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
})
.transition()
  .duration(duration)
  .attr("d", diagonal);

// Transition links to their new position.
link.transition()
  .duration(duration)
  .attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
  .duration(duration)
  .attr("d", function(d) {
    var o = {x: source.x, y: source.y};
    return diagonal({source: o, target: o});
  })
  .remove();

但我不知道如何。
我看到 diagonal.source（[source]）和
diagonal.target（[target] code>方法在API参考中。
也许他们可以帮助我，但我不明白如何使用它。
有人可以帮助我吗？

but I can't figure out how. I saw the diagonal.source([source]) and the diagonal.target([target]) methods in the API reference. Maybe they can help me, but I don't understand how to use it. Can someone help me?

推荐答案

所有你需要做的是将路径的开始和结束矩形的宽度。您需要修改的是：

All you need to do is offset the start and end of the path by the width of the rectangles. What you need to modify is this:

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

假设 w 矩形，新代码应该看起来像这样。

Assuming that w is the width of your rectangle, the new code should look something like this.

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x - w]; });

这篇关于d3.js：modifyng树布局中的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！