我是D3的新手,我正在尝试修改一些示例代码 . 我可以显示地理 Map ,将其限制在美国,为我想要表示的每个城市绘制圆圈,但我无法弄清楚如何在这些圆圈旁边显示文字 . 当我检查页面时,我可以看到D3在路径中创建了一个子元素,它具有城市的名称,但我似乎无法使其显示 . 任何帮助是极大的赞赏 . 这是我正在使用的代码:
.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;
})
}