D3にテキストが表示されないSVG

Question

d3のSVGにテキストを追加する際に問題があります。 私が達成したいのは、この画像に表示されているように、テキストが赤い円で表示されることです：Circle d3 graph。

なんらかの理由で私はテキストを表示させることができず、数時間かけてこの問題を解決する方法はありませんでした。ここでは、この...

は、私が思うのコードの断片は、この問題を解決することが重要ですされています

.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"); 

そしてここでは、PL上の完全なコードですunkr：https://plnkr.co/edit/b6PjicI0vOoYSHaDnWS0?p=preview

ありがとうございました！

Answer 1

2つの小さな変更を加える必要があります。まず、<text>要素を追加するときは、classを2回設定します。しかし、2回目は最初のものを上書きするので、それらの要素には、あなたが持っていると期待するクラス.text-tooltipNはありません。 D3 v4のでは、あなたが他のクラスを上書きせずに.classed('class-name', true)を複数回使用することができますが、それだけですべてを一度に設定する方が簡単です：

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

第二に、あなたはマウスイベント内の二つの機能を必要としない - あなたのことに注意してくださいあなたはjsfiddleでいくつかのサンプルデータや作業のコードを追加したりすることができplunkr

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