title: Get text to move with nodes in D3.js graph
body: <p>I have code below that procodes a graph similar to <a href="http://bl.ocks.org/mbostock/3750558" rel="nofollow">here</a>. I would like to add labels to the node and hopefully the edges of this graph, however, in my code below, my text on the nodes does not move when the graph is moved. How can I get my text to move with the nodes?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  .link {
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .node {
    cursor: move;
    fill: #ccc;
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .node.fixed {
    fill: #f00;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var width = 960,
      height = 500;
  
  var force = d3.layout.force()
      .size([width, height])
      .charge(-400)
      .linkDistance(40)
      .on("tick", tick);
  
  var drag = force.drag()
      .on("dragstart", dragstart);
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  var link = svg.selectAll(".link"),
      node = svg.selectAll(".node");
      text = svg.selectAll(".text");
  
  var graph = {
    "nodes": [
      {"x": 469, "y": 410, "label": "A"},
      {"x": 493, "y": 364, "label": "B"},
      {"x": 442, "y": 365, "label": "C"},
      {"x": 467, "y": 314, "label": "D"},
      {"x": 477, "y": 248, "label": "E"},
      {"x": 425, "y": 207, "label": "F"},
      {"x": 402, "y": 155, "label": "G"},
      {"x": 369, "y": 196, "label": "H"},
      {"x": 350, "y": 148, "label": "I"},
      {"x": 539, "y": 222, "label": "J"},
      {"x": 594, "y": 235, "label": "K"},
      {"x": 582, "y": 185, "label": "L"},
      {"x": 633, "y": 200, "label": "M"}
    ],
    "links": [
      {"source":  0, "target":  1},
      {"source":  1, "target":  2},
      {"source":  2, "target":  0},
      {"source":  1, "target":  3},
      {"source":  3, "target":  2},
      {"source":  3, "target":  4},
      {"source":  4, "target":  5},
      {"source":  5, "target":  6},
      {"source":  5, "target":  7},
      {"source":  6, "target":  7},
      {"source":  6, "target":  8},
      {"source":  7, "target":  8},
      {"source":  9, "target":  4},
      {"source":  9, "target": 11},
      {"source":  9, "target": 10},
      {"source": 10, "target": 11},
      {"source": 11, "target": 12},
      {"source": 12, "target": 10}
    ]
  };
  
  (function() {
    console.log(graph)
    force
        .nodes(graph.nodes)
        .links(graph.links)
        .start();
  
    link = link.data(graph.links)
      .enter().append("line")
        .attr("class", "link");
  
    node = node.data(graph.nodes)
      .enter().append("circle")
        .attr("class", "node")
        .attr("r", 12)
        .on("dblclick", dblclick)
        .call(drag);
  
    var text = svg.append("svg:g").selectAll("g")
             .data(force.nodes())
             .enter().append("svg:g");
  
    text.append("svg:text")
        .text(function(d) { return d.label; })
  
    text.attr("transform",  function(d) {
          return "translate(" + d.x + "," + d.y + ")"; 
        })
  
  })();
  
  
  function tick() {
    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; });
  
    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  }
  
  function dblclick(d) {
    d3.select(this).classed("fixed", d.fixed = false);
  }
  
  function dragstart(d) {
    d3.select(this).classed("fixed", d.fixed = true);
  }
  
  &lt;/script&gt;
  </code></pre>