javascript - d3 中带有弯头连接器的树/树状图

Question

我是 d3.js(和一般的 SVG)的新手，我想做一些简单的事情:一个带有 Angular 连接器的树/树状图。

我已经从这里拆解了 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 示例都使用重力来绘制对象图而不是 TreeMap 。

Answer 1

用自定义路径生成器替换 diagonal 函数，使用 SVG 的“H”和“V”path commands .

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。这就是对 Angular 线的投影函数所做的，但在上面的肘部实现中，我只是硬编码了行为而不是使用 configurable function。 .

如:

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

还有一个工作示例:

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