logo标签列表

在D3圆形中添加标签/文本？

javascriptcsvd3.js
3

我有以下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

我希望在使用D3绘制圆圈时将city值附加到圆顶部。以下是我用于创建这些圆圈的代码：
<!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 列？任何建议都将非常有帮助！

1个回答
12

您不能在SVG圆形上附加文本 - 但是您可以将文本附加到g元素; 这是最简单和最干净的解决方案。

附加

var g = svg.selectAll(null)
        .data(data)
        .enter()
        .append("g")
        .attr("transform", function(d) {
            return "translate(" + projection([d.longitude, d.latitude]) + ")" ;
        })

由于每个

g.append("circle")
  .attr("r", function(d) {return Math.sqrt(d.population * 0.00004);})
  .attr("fill","red")
  .attr("etc",...)

g.append("text")
  .text(function(d) { return d.city; })
  .attr("x"...)
  .attr("y"...)
注意，圆形不再需要定位：cx和cy将默认为零——这很好，因为我们已经转换了
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接