我有以下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列？任何建议都会非常有帮助！ 最佳答案
您无法使用svg将文字附加到圈子中，但是可以将两者都附加到g；这是您最简单，最干净的解决方案。
附加g时，使用投影值设置变换，这允许将圆心相对于变换放置在[0,0]处：
var g = svg.selectAll(null)
.data(data)
.enter()
.append("g")
.attr("transform", function(d) {
return "translate(" + projection([d.longitude, d.latitude]) + ")" ;
})
由于每个
g的原点都具有要显示的每个圆的原点，因此现在可以轻松地将圆和文本附加为子元素：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将默认为零-这很好，因为我们转换了
g的坐标。另外，使用transform而不是同时使用cx和cy更为简洁，特别是在使用投影时（并且通过转换g，您也不需要使用投影来放置文本）。最后，您可能希望修改文本的x，y和text-anchor属性以适合您的需要，但是默认的x，y为零将使文本从圆心开始。
首先附加圆圈，然后附加文字，因此文字显示在上方。
关于javascript - 在D3圈子中添加标签/文字？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47401647/