如何在d3强制有向图中的链接上有文本标签

时间:2013-11-25 20:17:12

标签: d3.js label

我正在使用力导向图,我希望链接上的文本以链接为中心(见图)。有办法吗?

Click here to see how I want the labels to be shown

1 个答案:

答案 0 :(得分:7)

我相信拉尔斯是对的​​。基于他提供的链接的最后一个响应,我将此代码添加到我的一个力图中,并且工作正常:

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