我是 D3 的新手,所以我想在这个树布局示例 ( http://bl.ocks.org/mbostock/4339083 )中找出以下一些内容。
- 如何将名称添加到链接(边缘),即如果存在从 A 到 B 的链接(B 是 A 的子项),则在链接上显示 B 的名称。
- 如何根据子项中给定的大小更改链接的宽度,即如果有从 A 到 B 的链接并且 B 的大小为 50,则链接的宽度应为 50px。
请帮我解决这些问题,因为我无法理解它必须完成的方式。
谢谢你。
我是 D3 的新手,所以我想在这个树布局示例 ( http://bl.ocks.org/mbostock/4339083 )中找出以下一些内容。
请帮我解决这些问题,因为我无法理解它必须完成的方式。
谢谢你。
对于标签,您需要将text
元素附加到链接路径:
link.enter().insert("text", "g")
.attr("x", function(d) { return (d.source.x+d.target.x)/2; })
.attr("y", function(d) { return (d.source.y+d.target.y)/2; })
.text(function(d) { return d.target.name; });
您可能需要调整标签位置。
要改变链接的宽度,需要设置stroke-width
路径的属性:
link.enter().insert("path", "g")
.attr("class", "link")
.attr("stroke-width", function(d) { return d.target.size; })
.attr("d", function(d) {
var o = {x: source.x0, y: source.y0};
return diagonal({source: o, target: o});
});