D3.js 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; }) } .州{ 填充：#ccc； 冲程：#fff； } .符号{ 填充：钢蓝； 填充不透明度：.8； 冲程：#fff； } 可变宽度=960， 高度=500； var radius=d3.scale.sqrt（） .domain（[0，1e6]） .范围（[0,10]）； var path=d3.geo.path（）； var svg=d3.选择（“正文”）.追加（“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度）； 队列（） .defer（d3.json，“us.json”） .defer（d3.json，“us state centroids.json”） .等待（准备好）； 功能就绪（错误、us、质心）{ 追加（“路径”） .attr（“类别”、“状态”） .datum（topojson.feature（us，us.objects.states）） .attr（“d”，路径）； 变量符号=svg。选择全部（“.symbol”） .data（形心.features.sort（函数（a，b）{返回b.properties.population-a.properties.population；}）） .enter（）.append（“路径”） .attr（“类别”、“符号”） .attr（'pointer-events'，'all'） .on（“鼠标悬停”，功能（b）{ d3.选择全部（'.line_over'）。样式（“显示”、“块”）； }) .attr（“d”，path.pointRadius（函数（d）{返回半径（d.properties.population）；}）） 符号。追加（“文本”） .文本（功能（d）{ 返回d.properties.name； }) }

---

不要将

文本

附加到

路径

，将其附加到SVG。我尝试过，我看到它现在在SVG中创建文本元素的位置，但它仍然没有显示文本。我在css类中设置了填充和字体大小，并设置了类attr，但仍然没有设置。您是否检查了正在引用的属性是否已设置？这会附加文本，但位置不正确？您还需要设置

x

和

y

属性。除了选择和附加

文本

元素之外，您可以执行与路径完全相同的操作。