는 원형 차트를 d3js - 텍스트

Question

내가 호버에 표시 D3의 파이 차트를 작성하고 이름과 해당 슬라이스의 값을 원하는거야 레이블 :

@graph.append('path') 
     .attr('d', @arc) 
     .style('fill', (svg) => @color(svg.data.value)) 
     .attr('class', 'pie-slice') 
     .on('mouseover', @pieSliceMouseOver) 
     .on('mouseout', @pieSliceMouseOut) 
     .append('text') 
     .style('stroke', 'black') 
     .append('textPath') 
     .text((svg) -> "#{svg.data.name}: #{svg.data.value}") 

이 출력 다음 (의 한 조각에 대한 파이)

<path d="M-101.9924541587831,53.12757565208981A115,115 0 0,1 -2.1124459603436008e-14,-115L0,0Z" style="fill: #37823e;" class="pie-slice"> 
    <text style="stroke: #000000;"> 
    <textPath>401K: 82.28</textPath> 
    </text> 
</path> 

하지만 텍스트 자체는 표시되지 않습니다. Chrome에서 경로 노드를 강조 표시하면 브라우저가 슬라이스를 올바르게 강조 표시하지만 텍스트로 이동하면 노드가 표시되지 않습니다.

mouseover 및 mouseout 처리기는 의도 된대로 작동하지만 텍스트는 표시되지 않습니다.

Answer 1

기본 툴팁의 경우 마우스 오버시 레이블을 표시 할 요소에 title 요소 만 추가하면됩니다. 브라우저는이 기능을 직접 제공하기 때문에 이벤트 핸들러를 추가 할 필요조차 없습니다.

무언가가 더 필요한 경우 tipsy과 같은 타사 라이브러리를 사용할 수 있습니다 (예 : here).