文本未在 D3 SVG 中显示答案

【问题标题】：Text not displaying in D3 SVG文本未在 D3 SVG 中显示
【发布时间】：2017-06-04 17:05:57
【问题描述】：

我在 d3 中将文本附加到我的 SVG 时遇到问题。我想要实现的是文字出现在红色圆圈中，如下图所示：Circle d3 graph。

由于某种原因，我无法显示文本，在花了几个小时之后，我真的不知道如何解决这个问题......我在 SO 上发现了一些类似的问题，但没有任何帮助我解决这个问题...

以下是我认为对解决此问题至关重要的代码片段：

.on("mousemove", function (d) {
  svg.select("text.text-tooltip1")
    .text(function(d){
    return d3.time.format("%B %d, %Y")(d["data"]);
  })

  svg.select("text.text-tooltip2")
    .text(function(d){
    return "PM emmision:" + d3.round(x(d["ug_mean"]),2);
  })

  svg.select("text.text-tooltip3")
    .text(function(d){
    return "Benzen emmision:" + d3.round(x(d["Precipitationmm"]),2);
  })
})

和

svg.append("circle")
      .attr("class", "exp")
      .attr("cx", 0)
      .attr("cy", 0)
      .attr("r", 130)
      .attr("fill", "#e74747")
      .attr("opacity", "0.8");

svg.append("text")
            .attr("class", "text-tooltip1")
            .attr("dy", "-2em")
            .style("text-anchor", "middle")
            .attr("class", "data");

svg.append("text")
            .attr("class", "text-tooltip2")
            .attr("dy", "1.5em")
            .style("text-anchor", "middle")
            .attr("class", "data");

svg.append("text")
            .attr("z-index", 100)
            .attr("class", "text-tooltip3")
            .attr("dy", "2.5em")
            .style("text-anchor", "middle")
            .attr("class", "data");

这是 Plunkr 上的完整代码：https://plnkr.co/edit/b6PjicI0vOoYSHaDnWS0?p=preview

非常感谢您的帮助！

【问题讨论】：

你能在 jsfiddle 或 plunkr 中添加一些示例数据或工作代码吗？
这里是：plnkr.co/edit/b6PjicI0vOoYSHaDnWS0?p=preview

标签： javascript d3.js svg text

【解决方案1】：

您需要进行两个小改动。首先，当您附加 <text> 元素时，您将设置 class 两次。但是第二次覆盖了第一次，因此这些元素没有您期望它们拥有的 .text-tooltipN 类。在 D3 v4 中，您可以多次使用 .classed('class-name', true) 而不会覆盖其他类，但一次设置全部更容易：

svg.append("text")
  .attr("class", "data text-tooltip1")
  .attr("dy", "-2em")
  .style("text-anchor", "middle");

其次，鼠标事件中不需要两个函数——请注意，您嵌套了两个 function(d){} 的情况，这意味着 d 不再具有您想要的值：

.on("mousemove", function (d) {
   svg.select("text.text-tooltip1")
     .text(d3.time.format("%B %d, %Y")(d["data"]))

【讨论】：