D3 JS显示旁边的文本
我是D3的新手，我试图修改一些示例代码。 我可以显示地理地图，将其限制在美国，为每个想要代表的城市绘制圈子，但我无法弄清楚如何在这些圈子旁边显示文字。 当我检查页面时，我可以看到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;
})
}
链接地址: http://www.djcxy.com/p/90973.html