36

I am trying to add text label to nodes in d3 Force Directed Graph, there seems to be an issue. This is my Fiddle:

enter image description here

When I add the node name like this:

node.append("text")
    .attr("class", "word")
    .attr("dy", ".35em")
    .text(function(d) {
        console.log(d.name);
        return d.name;
    });

There's no change but the names are getting logged.

When i tried using bounding box , the node labels appeared but the nodes are stacked up on the top-left corner of box while the node links are fine.This fiddle is the outcome of that effort i put in. Can anyone tell me what am i doing wrong?

VividD
  • 10,456
  • 6
  • 64
  • 111
Aditya
  • 4,453
  • 3
  • 28
  • 39

1 Answers1

55

You are adding a text element inside a circle, that won't work. You can add groups under the svg element and then append the circle and a text in each group:

// Create the groups under svg
var gnodes = svg.selectAll('g.gnode')
  .data(graph.nodes)
  .enter()
  .append('g')
  .classed('gnode', true);

// Add one circle in each group
var node = gnodes.append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function(d) { return color(d.group); })
  .call(force.drag);

// Append the labels to each group
var labels = gnodes.append("text")
  .text(function(d) { return d.name; });

force.on("tick", function() {
  // Update the links
  link.attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

  // Translate the groups
  gnodes.attr("transform", function(d) { 
    return 'translate(' + [d.x, d.y] + ')'; 
  });    

});

A fork of your fiddle with this strategy is here

Pablo Navarro
  • 8,244
  • 2
  • 43
  • 52
  • 3
    Pretty much what i wanted, had to edit a bit for the re-size on hover .Thanks a lot. – Aditya Aug 12 '13 at 09:11
  • 1
    I know this post is old, but note that .call(force.drag) should be on gnodes, not node. – Aaron Aug 05 '14 at 16:58
  • 3
    Using `call(force.drag)` on `gnodes` would allow the user to drag the labels or the circles (everything under the groups), whereas using them in `node` only allow to drag the circles. – Pablo Navarro Aug 05 '14 at 22:59
  • Where do I put the exit().remove() call? You need to have that in order to update the graph – RamblerToning Oct 21 '15 at 08:52
  • Either before or after the `force.on('tick', callback)` call, probably inside teh `drawGraph` function on the original fiddle http://jsfiddle.net/draditya91/RRUzZ/ – Pablo Navarro Oct 22 '15 at 02:40