d3.js에 직사각형 값 추가

Question

자세히보기 위해 plunker을 만들었습니다.

붉은 색 사각형 상자에 차트 포인트를 추가하고 싶습니다.

도움이 필요합니다.

Thanks in advance. 

Answer 1

코드에 rect DOM에 텍스트를 추가하고 있습니다. 그 이유 때문에 텍스트가 표시되지 않습니다.

가 (우리의 경우 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 단계 :

이 솔루션은 1 단계 것

마우스에

밖으로 불투명도를 만들 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]) 
     } 

작업 코드를 가져가 세 개의 값이입니다 here