title: Add names of the states to a map in d3.js
body: <p>I am using albersUSA projection to display a map. 
  I want to add the name of the states to each state.</p>
  
  <p>This is what I tried, and i can see the names of the states in the source, but I don't see them rendered.
  What am i doing wrong?</p>
  
  <pre><code>var width = 1060,
  height = 600,
  
  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  
  svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height)
      .on("click", click)
      .on("mousemove", mousemove);
  
  var g = svg.append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .append("g")
      .attr("id", "states");
  
  var projection = d3.geo.albersUsa()
      .scale(width)
      .translate([0, 100]);
  
  var path = d3.geo.path()
      .projection(projection);
  
  draw();
  
  function draw(){
  
    d3.json("readme.json", function(json) {
      g.selectAll("path")
      .data(json.features)
      .enter()
      .append("path")
      .attr("d", path)
      .append("svg:text")
      .text(function(d){
          return d.properties.name;
      })
      .attr("x", function(d){
          return -path.centroid(d)[0];
      })
      .attr("y", function(d){
          return  -path.centroid(d)[1];
      });
  
    });
  }
  </code></pre>