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），您可以使用第三方库，例如​​。