d3.js - 如何在 d3 力有向图中的链接上添加文本标签

Question

这个问题在这里已经有了答案:





Add text/label onto links in D3 force directed graph

(5 个回答)


7年前关闭。




我正在使用力有向图，并且我希望链接上的文本以链接为中心(见图)。有没有办法做到这一点？

Answer 1

我相信拉斯是正确的。根据他提供的链接的最后一个回复，我将此代码添加到我的一个力图中，并且效果很好:

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;});