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

Question

我对 d3.js（和一般的 SVG）非常陌生，我想做一些简单的事情：带有角度连接器的树/树状图。

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

我在这里开始了：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 示例都是使用引力来绘制物体而不是树。

score 26 · Accepted Answer

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

还有一个工作示例：

1 回答 1