添加文字到符号地图

Question

我最近一直在学习D3，我一直在玩这个symbol map tutorial。

我已经尝试了很多事情来获取任何数据显示在符号作为文本，我似乎无法弄清楚如何做到这一点。

好像我需要沿线加

.text(function(d) { return d.properties.population; }) 

一些地方。我试过在各个地方使用.append或.selectAll，但是我无法让它工作。

Answer 1

你可以通过两种方式来解决这个问题，你可以使用工具提示或者将地图放在地图上。这些关于this google group conversation等工具提示以及包括这些生物视觉链接的链接的讨论很多：Simple tooltip和Tooltips as a helper。在bl.ocks例如你已经对准了使用简单的工具提示选项将需要增加2行代码为：

svg.selectAll(".symbol") 
     .data(centroid.features.sort(function(a, b) { return b.properties.population - a.properties.population; })) 
    .enter().append("path") 
     .attr("class", "symbol") 
     .attr("d", path.pointRadius(function(d) { return radius(d.properties.population); })) 
    .append("title") 
     .text(function (d) { return d.properties.name; }); 

要将文本添加到您需要附加一些SVG文本元素的地图。所以你需要设置类似于上面符号块的东西，并计算文本的x和y。这样做可能有更优雅的方式，但这使得它很清楚发生了什么。 x和y由path.centroid来计算，它返回你的点的屏幕坐标。

svg.selectAll("text") 
     .data(centroid.features).enter()  
    .append("text") 
     .attr("x", function (d) { return path.centroid(d)[0]; }) 
     .attr("y", function (d) { return path.centroid(d)[1]; }) 
     .text(function (d) { return d.properties.name; }); 

希望这有助于

您可以在行动，在这个bl.ock看到他们两个。