reactjs - 如何在 React-vis 上启用工具提示？

Question

如何在 React-vis 上启用工具提示？

<Sunburst
 hideRootNode
 colorType="literal"
 data={data}
 height={300}
 width={350}/>

我没有看到有关可视化的工具提示，如何才能看到将鼠标悬停在图表上的工具？

就 SunBurst 而言，Uber github 页面上有一个示例，您必须根据数据点的角度重新计算工具提示的位置，这不是很方便。

Answer 1

如果需要，您需要手动添加工具提示! React-vis 尝试不对您将如何使用它做出假设，它只是尝试提供一个灵活的平台。您可以在此处查看如何执行此操作的示例: https://github.com/uber/react-vis/blob/master/showcase/sunbursts/sunburst-with-tooltips.js但我也可以在这里举一个简单的例子:

<Sunburst hideRootNode colorType="literal" data={data} height={300} width={350}> <Hint value={hoveredValue} /> </Sunburst> 其中，hoveredValues 是适当的悬停值(可能是从旭日本身的悬停监听器获取的)。您可能需要修改通过悬停方法从您那里获得的值

function buildValue(hoveredCell) {
  const {radius, angle, angle0} = hoveredCell;
  const truedAngle = (angle + angle0) / 2;
  return {
    x: radius * Math.cos(truedAngle),
    y: radius * Math.sin(truedAngle)
  };
}

我已经打开了一个 PR，将此答案的内容添加到 sunburst 文档 (#552)，希望对您有所帮助。