D3 JS在Circle旁边显示文本

Question

我是D3的新手，我正在尝试修改一些示例代码。我可以显示地理地图，将其限制在美国，为我想要代表的每个城市绘制圆圈，但我无法弄清楚如何在这些圆圈旁边显示文字。当我检查页面时，我可以看到D3在路径中创建了一个子元素，它具有城市的名称，但我似乎无法使其显示。任何帮助是极大的赞赏。这是我正在使用的代码：

    
    .states {
      fill: #ccc;
      stroke: #fff;
    }
    .symbol {
      fill: steelblue;
      fill-opacity: .8;
      stroke: #fff;
    }
    
    
    
    
    
    

    var width = 960,
        height = 500;

    var radius = d3.scale.sqrt()
        .domain([0, 1e6])
        .range([0, 10]);

    var path = d3.geo.path();

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    queue()
        .defer(d3.json, "us.json")
        .defer(d3.json, "us-state-centroids.json")
        .await(ready);

    function ready(error, us, centroid) {
      svg.append("path")
            .attr("class", "states")  
            .datum(topojson.feature(us, us.objects.states))
            .attr("d", path);

    var symbols =  svg.selectAll(".symbol")
            .data(centroid.features.sort(function(a, b) { return b.properties.population - a.properties.population; }))
            .enter().append("path")
            .attr("class", "symbol")
            .attr('pointer-events', 'all')
            .on("mouseover", function (b) {
                d3.selectAll('.line_over').style("display", "block");
            })
            .attr("d", path.pointRadius(function(d) { return radius(d.properties.population); }))       

    symbols.append("text")
         .text(function(d){
                        return d.properties.name;
                    })
    }