title: labels wont show up on d3 force diagram
body: <p>I am a beginner at d3. One of the diagrams I find particularly helpful and fun is the d3 force diagram. I've been playing around with it, but for some reason I've had a lot of trouble with this particular data set. Specifically, I've been trying forever to get the labels to show up on my d3 force diagram, but it just won't work. Here is my code:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;meta charset="utf-8"&gt;
   &lt;style&gt;
   .links line {
    stroke: #999;
    stroke-opacity: 0.6;
  }
  .nodes circle {
    stroke: #fff;
    stroke-width: 1.5px;
  }
  .node text {
    pointer-events: none;
    font: 10px sans-serif;
  }
  
  &lt;/style&gt;
  &lt;svg width="960" height="600"&gt;&lt;/svg&gt;
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
  
  var color = d3.scaleOrdinal(d3.schemeCategory20);
  
  var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function(d) { return d.id; }))
      .force("charge", d3.forceManyBody())
      .force("center", d3.forceCenter(width / 2, height / 2));
  
  d3.json("links.json", function(error, graph) {
    if (error) throw error;
    var link = svg.append("g")
        .attr("class", "links")
      .selectAll("line")
      .data(graph.links)
      .enter().append("line")
        .attr("stroke-width", function(d) { return 1});
  
    var node = svg.append("g")
        .attr("class", "nodes")
      .selectAll("circle")
      .data(graph.nodes)
      .enter().append("circle")
        .attr("r", function(d){
          return 3*d.size;
        })
        .attr("fill", function(d) { return color(d.id); })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended));
  
        node.append("svg:title")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.id });
  
    simulation
        .nodes(graph.nodes)
        .on("tick", ticked);
  
    simulation.force("link")
        .links(graph.links);
  
    function ticked() {
      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 dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }
  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }
  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>thanks so much for your help</p>
  
  <p>edit: here is my links.json</p>
  
  <pre><code>{
    "nodes": [
    {"id": "AK","size": "1.414213562"},
    {"id": "AL","size": "1.414213562"},
    {"id": "AR","size": "1.414213562"},
    {"id": "AZ","size": "2.828427125"}],
  "links": [
    {"source": "ABC","target": "CO","value": "A"},
    {"source": "ABC","target": "CO","value": "A"},
    {"source": "ABC","target": "CO","value": "A"},
    {"source": "ABC","target": "FL","value": "A"}
  }
  </code></pre>