Javascript d3中带有弯头接头的树/树状图

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

我已经从这里分解了d3示例： 我想让它更像protovis的例子：

我从这里开始：我认为以下片段是错误的：

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

---

但是没有明显的替代品，我可以使用

d3.svg.line

，但我不知道如何正确地集成它，理想情况下，我想要一个弯头连接器……尽管我想知道我是否使用了错误的库，正如我所看到的许多d3示例所示，它们使用重力来绘制对象的图形，而不是树。

使用SVG的“H”和“V”将

对角线

函数替换为自定义路径生成器

请注意，源和目标的坐标（x和y）是交换的。此示例显示具有水平方向的布局，但是布局始终使用相同的坐标系：x是树的宽度，y是树的深度。因此，如果要显示右边缘有叶（最底部）节点的树，则需要交换x和y。这就是对角线的投影函数所做的，但是在上面的肘部实现中，我只是硬编码了行为，而不是使用一个

例如：

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

还有一个工作示例：

---

谢谢，迈克，我希望你能看到这个问题！我将试一试，稍后再报告……有没有什么好的SVG教程站点值得推荐阅读？……请记住，我什么都不知道？嘿@mbostock，我现在使用的是您的肘部代码，但当与切换（展开、折叠）结合使用时，它不再起作用（对角线很好）。你能解释一下我怎样才能让它工作吗？

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