use*_*442 1 javascript csv d3.js
我有以下 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 和文本锚点属性以满足您的需要，但默认的 x、y 为零会将文本从圆的中心开始放置。
先添加圆圈，然后添加文本，这样文本就会出现在上面。
| 归档时间： |
|
| 查看次数： |
4959 次 |
| 最近记录： |