Add names of the states to a map in d3.js

Question

I am using albersUSA projection to display a map. I want to add the name of the states to each state.

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?

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];
    });

  });
}

Answer 1

OK for anyone wondering, this is how I managed to do it:

function draw(){

  d3.json("readme.json", function(json) {
    g.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .on("click", click);

    g.selectAll("text")
    .data(json.features)
    .enter()
    .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];
    })
    .attr("text-anchor","middle")
    .attr('font-size','6pt');


  });
}

Answer 2

I took a similar approach to the answer you provided yourself, but I didn't like where "centroid" put all of the state names. Hawaii, Louisiana, Michigan, and Florida, for instance. So I added properties to the json data for the state info for dx and dy for those states, and added code to the drawing function.

Here's an example of some of the modified states (with the coordinates removed to keep it smaller):

    {
        "geometry": { "type": "Polygon", "coordinates": [] },
        "type": "Feature",
        "id": "12",
        "properties": { "name": "Florida", "abbr": "FL", "dx": "1em" }
    },
    {
        "geometry": { "type": "MultiPolygon", "coordinates": [] },
        "type": "Feature",
        "id": "15",
        "properties": { "name": "Hawaii", "abbr": "HI", "dx": "1.15em", "dy": "1.25em" }
    },

And here is the portion of the function that draws the labels:

        g.selectAll("text")
            .data(json.features)
            .enter()
            .append("text")
            .attr("transform", function (d) { return "translate(" + path.centroid(d) + ")"; })
            .attr("dx", function (d) { return d.properties.dx || "0"; })
            .attr("dy", function (d) { return d.properties.dy || "0.35em"; })
            .text(function (d) { return d.properties.abbr; });