Question

我有以下CSV文件：

city,population,latitude,longitude
New York; New York,8336697,40.712784,-74.005941
Los Angeles; California,3857799,34.052234,-118.243685
Houston; Texas,2160821,37.326159,-91.955988
San Antonio; Texas,1382951,29.419336,-98.478021
Austin; Texas,842592,32.552483,-98.370042
Charlotte; North Carolina,775202,35.227087,-80.843127
Dallas; Texas,1241162,32.191303,-96.878367
Phoenix; Arizona,1488750,33.448377,-112.074037
San Jose; California,982765,37.338208,-121.886329
Fort Worth; Texas,777992,32.755488,-97.330766

我想将city值附加到我使用D3渲染的圆圈之上。以下是我用来创建这些圈子的代码：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
    fill: #000;
        stroke: #fff;
        stroke-width: 0.25px;
}

.states {
        fill: none;
        stroke: #fff;
        stroke-linejoin: round;
}
</style>

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
var width = 960,
        height = 500;

var projection = d3.geo.albersUsa()
                          .scale(1000)
                           .translate([width / 2, height / 2]);

var path = d3.geo.path()
                      .projection(projection);

var svg = d3.select("body").append("svg")
                 .attr("width", width)
                 .attr("height", height);
var layer = svg.append('g');
d3.json("us.json", function(error, us) {
    layer.append("g")
               .attr("class", "counties")
               .style("fill", "#fcfa86")
               .selectAll("path")
               .data(topojson.feature(us, us.objects.counties).features)
               .enter().append("path")
               .attr("d", path);

            svg.append("path")
               .datum(topojson.mesh(us, us.objects.states, function(a, b) { return  a !== b; }))
               .attr("class", "states")
               .style("stroke", "orange")
               .attr("d", path);

});

d3.csv("city_growth.csv", function(error, data) {
    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];})
        .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];})
        .attr("r", function(d) {return Math.sqrt(d.population * 0.00004);})
        .style("opacity",".6")
        .style("fill", "red");

</script>
</body>

如何创建对city值的引用并让它出现在每个圈子的旁边？我使用以下代码片段来实现这一点，但标签不会出现：

svg.selectAll("circle")
        .data(data)
        .enter()
        .append("text")
        .text(function(d) { return d.city; })
        .attr("x", function(d) {return projection([d.longitude, d.latitude])[0];})
        .attr("y", function(d) {return projection([d.longitude, d.latitude])[1];})
        .attr("font-size", "10px")
        .attr("color", "red");

从顶部显示的CSV文件中获取城市名称的正确方法是什么？我是否错误地提到了city列？任何建议都会非常有用！

在D3圈子中添加标签/文字？

0 个答案: