如何在d3力导向图中的链接上添加文本标签

Question

我正在使用强制定向图，并且希望将链接上的文本居中显示在链接上（请参见图片）。有办法实现吗？

- gaurav.singharoy

---

@LarsKotthoff 我已经查看了那篇文章。那不是我想要的。首先，在那篇文章中，文本是针对固定链接的。其次，我希望文本与链接在同一行，就像我发布的截图中所示。 - gaurav.singharoy

在你的情况下，那里描述的解决方案也应该适用——将文本放在行上只需要进行 dy 调整即可。如果您能发布一些展示您正在尝试做什么的代码，那会很有帮助。 - Lars Kotthoff

Answer 1

我相信Lars是正确的。基于他提供的链接中的最后一个回复，我将这段代码添加到了我的力导向图中，它可以正常工作：

var path = svg.append("g").selectAll(".link")
    .data(force.links())
  .enter().append("path")
    .attr("id",function(d,i) { return "linkId_" + i; })
    ...

var labelText = svg.selectAll(".labelText")
    .data(force.links())
  .enter().append("text")
    .attr("class","labelText")
    .attr("dx",20)
    .attr("dy",0)
    .style("fill","red")
  .append("textPath")
    .attr("xlink:href",function(d,i) { return "#linkId_" + i;})
    .text(function(d,i) { return "text for link " + i;});

- FernOfTheAndes