Question

我在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

非常感谢你的帮助！

Answer 1

您需要进行两项小改动。首先，当您附加<App />元素时，您将设置<text>两次。但是第二次覆盖了第一次，所以这些元素没有你希望它们拥有的class类。在D3 v4中，您可以多次使用.text-tooltipN而不会覆盖其他类，但只需一次设置即可：

.classed('class-name', true)

其次，您在鼠标事件中不需要两个功能 - 请注意您已经嵌套了两个svg.append("text") .attr("class", "data text-tooltip1") .attr("dy", "-2em") .style("text-anchor", "middle");个案例，这意味着function(d){}不再具有您想要的值：

文本未在D3 SVG中显示

1 个答案: