d3js 饼图 – 文本标签答案

【问题标题】：d3js Pie Chart – text labelsd3js 饼图 – 文本标签
【发布时间】：2013-03-22 17:16:40
【问题描述】：

我正在 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 处理程序按设计工作，但文本根本不显示。

【问题讨论】：

标签： svg d3.js

【解决方案1】：

对于基本工具提示，您只需将title 元素附加到要在鼠标悬停时显示标签的元素。您甚至不需要为此添加事件处理程序，因为浏览器自己提供此功能。

如果您需要更高级的东西（例如 here），可以使用第三方库，例如 tipsy。

【讨论】：