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查看其中的所有内容。

将文本添加到符号映射

1 个答案: