Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to have a text label on links in d3 force directed graphs [duplicate]

Tags:

label

d3.js

I am using a force directed graph, and i would like to have the text on the link centred on the link (see image). Is there a way to do it ?

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

like image 627
gaurav.singharoy Avatar asked Nov 25 '13 20:11

gaurav.singharoy


1 Answers

I believe Lars is correct. Based on the last response from the link he provided, I added this code to one of my force graphs and it worked fine:

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;});
like image 112
FernOfTheAndes Avatar answered Nov 19 '22 19:11

FernOfTheAndes