Add text label to d3 node in Force directed Graph and resize on hover

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:

    .attr("class", "word")
    .attr("dy", ".35em")
    .text(function(d) {

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?

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