给出类似于Dendrogram示例(source)的树形图,如何将标签放在边缘?绘制边缘的JavaScript代码如下行:
var link = vis.selectAll("path.link")
.data(cluster.links(nodes))
.enter().append("path")
.attr("class", "link")
.attr("d", diagonal);
D3的作者Mike Bostock慷慨地帮助了以下解决方案。为g.link定义样式;我只是复制了g.node的样式。然后,我用以下代码替换了“ var link = ....”代码。 x和y函数将标签放置在路径的中心。
var linkg = vis.selectAll("g.link")
.data(cluster.links(nodes))
.enter().append("g")
.attr("class", "link");
linkg.append("path")
.attr("class", "link")
.attr("d", diagonal);
linkg.append("text")
.attr("x", function(d) { return (d.source.y + d.target.y) / 2; })
.attr("y", function(d) { return (d.source.x + d.target.x) / 2; })
.attr("text-anchor", "middle")
.text(function(d) {
return "edgeLabel";
});
理想情况下,文本功能应为每个边缘提供一个标签。在准备数据时,我用边缘名称填充了一个对象,所以我的文本函数如下所示:
.text(function(d) {
var key = d.source.name + ":" + d.target.name;
return edgeNames[key];
});