无法在 d3.js 中的图形边缘附加标签

Question

我是js和d3的新手。我正在尝试使用 d3.js强制布局绘制图形。 我的目的是在边缘的两侧附加标签("XXX"和"OOO"(，但它不起作用。

这里是代码片段：

link.append('svg:text')
.attr('class', 'aEnd')
.text(function(d) { return "XXX"; });
link.append('svg:text')
.attr('class', 'zEnd')
.text(function(d) { return "OOO"; });

这是我正在处理的完整代码。

JSFIDDLE ： d3_graph_labelled_edge.js

Answer 1

不允许将text元素嵌套在line元素中，如此处所述。

您可以做的是将line元素包装在容器g并将链接标签附加到它们：

var glink = vis.selectAll("line.link")
.data(data.links)
.enter().append("svg:g");
var link = glink.append("svg:line")
[...]
glink.append('svg:text')
.attr('class', 'aEnd')
.text(function(d) { return "XXX"; });

更新的小提琴。