0

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

4

1 回答 1

0

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

如果您需要更高级的东西，您可以使用第三方库，例如Tipsy （此处为示例）。

于 2013-03-22T18:12:41.927 回答