d3.jsの矩形に値を追加

Question

詳細ビューのためにplunkerを作成しました。

矩形の赤いボックスにチャートのポイントを追加したいと思います。

ヘルプが必要です。

Thanks in advance. 

Answer 1

あなたのコードでは、テキストをrect DOMに追加しています。 これは、テキストが表示されない理由です。

ソリューションは ステップ1次のようになります。（私たちの場合3テキスト内の）テキストを作成

var textG = mouseG.append('text') 
       .attr('y',height+25) 
       .attr('font-family',"sans-serif") 
       .attr('font-size',"8") 
       .attr('fill', 'Black') 
       .style("text-anchor", "middle") 
var textB = mouseG.append('text') 
       .attr('y',height+15) 
       .attr('font-family',"sans-serif") 
       .attr('font-size',"8") 
       .attr('fill', 'Black') 
       .style("text-anchor", "middle") 
var textR = mouseG.append('text') 
       .attr('y',height + 8) 
       .attr('font-family',"sans-serif") 
       .attr('font-size',"8") 
       .attr('fill', 'Black') 
       .style("text-anchor", "middle") 

ステップ2：

マウスに出て不透明度を0

を作ります

d3.select("#test") 
     .style("opacity", "0"); 
    textG 
     .style("opacity", "0"); 
    textB 
     .style("opacity", "0"); 
    textR 
     .style("opacity", "0"); 

マウスが切れているので、テキストを表示したくないためです。

ステップ3：テキストDOM

 if (i ==2){ 
      textG.text(y.invert(pos.y).toFixed(2)) 
        .attr('x',mouse[0]) 
     } 
     if (i ==1){ 
      textB.text(y.invert(pos.y).toFixed(2)) 
        .attr('x',mouse[0]) 
     } 
     if (i ==0){ 
      textR.text(y.invert(pos.y).toFixed(2)) 
        .attr('x',mouse[0]) 
     } 

作業コードホバー上に3つの値がありますhere