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元素。您甚至不需要爲此添加事件處理程序，因爲瀏覽器本身提供了此功能。

如果您需要更好的東西（例如here），您可以使用第三方庫，例如​​。