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。

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

1 个答案: