Draw text onto azimuthal projection map d3js

Question

I've been working with this example: http://mbostock.github.io/d3/talk/20111018/azimuthal.html and I have it displaying and working nicely with my own data. I see that in the example he gives a title to each country

feature.append("svg:title")
  .text(function(d) { return d.properties.name; });

Which works nicely. I would like to actually put text instead of a title though. So I want it to show up on top of the country as a label.

I tried this

feature.append("svg:text")
    .text(function(d) { return d.p.n; })
    .style("color", "#00FF33");

And many other combinations but nothing seems to be showing up. Interestingly I can use the Chrome inspector and I will correctly see <text style="color: rgb(0, 255, 51);">Dominica</text> inside of the path element, but I don't see it showing up on the map. Therefore clearly it's technically working in that it draws it with the correct text but I don't see anything showing up.

I can also for example render the text easily if I just do

svg.selectAll("text")
    .data(collection.features)
    .enter()
    .append("svg:text")
    .text(function(d){
        return d.p.n;
    })
    .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');

But this just draws them onto the map without regard to the existing countries and therefore they don't move along.

Any ideas?

Thanks