文字未顯示在D3 SVG中

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

您需要進行兩個小更改。 首先，當您添加<text>元素時，您需要兩次設置class 。 但是第二次覆蓋第一次，因此這些元素沒有您期望它們具有的.text-tooltipN類。 在D3 v4中，您可以.classed('class-name', true)使用.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"]))