D3 JS Displaying Text Next To Circle

I am new to D3 and I am trying to modify some sample code. I can display a geo map, limit it to the US, draw circles for each of the cities I want represented but I can't figure out how to display text next to those circles. When I inspect the page I can see that D3 has created a child element in the path and it has the name of the city but I can't seem to make it appear. Any help is greatly appreciated. Here is the code I am working with:

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

    

链接地址: http://www.djcxy.com/p/90974.html

上一篇: D3 Y Scale，y vs高度？

下一篇: D3 JS显示旁边的文本