我对 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 。
最佳答案
使用 SVG 的“H”和“V”将 diagonal
函数替换为自定义路径生成器 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);
还有一个工作示例:
关于javascript - d3 中带有弯头连接器的树/树状图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15144468/