Accepted answer

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')
  .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(; })

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

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; })
    .attr("y2", function(d) { return; });

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


a fork of your fiddle with this strategy is here

Related Query

More Query from same tag