树/树状图与d3中的弯头连接器

Question

我对d3.js(以及一般的SVG)很新,我想做一些简单的事情:带有角度连接器的树/树形图.

我从这里蚕食了d3的例子:http ://mbostock.github.com/d3/ex/cluster.html我想让它更像这里的protovis示例:

• http://mbostock.github.com/protovis/ex/indent.html
• http://mbostock.github.com/protovis/ex/dendrogram.html

我在这里开始:http://jsbin.com/ugacud/2/edit#javascript,html,我认为这是以下代码片段的错误:

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

然而,没有明显的替代品,我可以使用d3.svg.line,但我不知道如何正确地集成它,理想情况下我想要一个弯头连接器....虽然我想知道我是否使用了错误的库,因为我见过的很多d3例子都是用引力来制作物体图而不是树.

Answer 1

diagonal使用SVG的"H"和"V" 路径命令将功能替换为自定义路径生成器.

function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
      + "V" + d.target.x + "H" + d.target.y;
}

请注意,交换源和目标的坐标(x和y).此示例显示具有水平方向的布局,但布局始终使用相同的坐标系:x是树的宽度,y是树的深度.因此,如果要在右边缘显示带有叶子(最下面)节点的树,则需要交换x和y.这就是对角线的投影功能所做的,但在上面的弯头实现中,我只是对行为进行了硬编码,而不是使用可配置的函数.

如:

svg.selectAll("path.link")
    .data(cluster.links(nodes))
  .enter().append("path")
    .attr("class", "link")
    .attr("d", elbow);

一个工作的例子:

• http://bl.ocks.org/d/2429963/