d3js Pie Chart - текст этикетка

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}") 

Это выводит следующее (для одного ломтика pie)

<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).