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元素附加到要在鼠标悬停时显示标签的元素。您甚至不需要为此添加事件处理程序，因为浏览器自己提供此功能。

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

d3js饼图 - 文本标签

1 个答案: