如何在树形图示例中的边缘上放置标签? [英] How to put labels on the edges in the Dendrogram example?
问题描述
假设树形图像树状图示例( source ),如何将标签放在边缘?绘制边缘的Javascript代码看起来像下面的行:
Given a tree diagram like the Dendrogram example (source), how would one put labels on the edges? The Javascript code to draw the edges looks like the next lines:
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函数将标签放在路径的中心。
Mike Bostock, the author of D3, very graciously helped with the following solution. Define a style for g.link; I just copied the style for g.node. Then I replaced the "var link =...." code with the following. The x and y functions place the label in the center of the path.
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";
});
文本函数应该理想地为每个边提供一个标签。在准备我的数据时,我填充了一个对象的边缘名称,所以我的文本函数看起来像这样:
The text function should ideally provide a label specifically for each edge. I populated an object with the names of my edges while preparing my data, so my text function looks like this:
.text(function(d) {
var key = d.source.name + ":" + d.target.name;
return edgeNames[key];
});
这篇关于如何在树形图示例中的边缘上放置标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!