javascript - 无法在 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 元素中，总结为 here .

您可以做的是将 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"; });

Updated fiddle .