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例子都是用引力来做对象图而不是树。

Answer 1

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

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

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

1 个答案: