抱歉我的英语不好......
我在这里使用这个例子:http://bl.ocks.org/mbostock/4339083 http://bl.ocks.org/mbostock/4339083构建树形图,但我用矩形更改了根的子级中的圆圈。
现在该图有点混乱,因为我看到链接穿过矩形。
我希望这些链接在矩形的两侧开始和停止。
我想我必须修改对角路径生成器中的代码:
// Update the links…
var nodeLinks = tree.links(nodes);
var link = vis.selectAll("path.link")
.data(nodeLinks, function(d) { return d.target.id; });
// Enter any new links at the parent's previous position.
link.enter().insert("svg:path", "g")
.attr("class", "link")
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
})
.transition()
.duration(duration)
.attr("d", diagonal);
// Transition links to their new position.
link.transition()
.duration(duration)
.attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
.duration(duration)
.attr("d", function(d) {
var o = {x: source.x, y: source.y};
return diagonal({source: o, target: o});
})
.remove();
但我不知道怎么做。
我看到了diagonal.source([source])
和
这diagonal.target([target])
API 参考中的方法。
也许他们可以帮助我,但我不明白如何使用它。
有人能帮我吗?
您所需要做的就是将路径的起点和终点偏移矩形的宽度。你需要修改的是这样的:
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });
假如说w
是矩形的宽度,新代码应该如下所示。
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x - w]; });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)