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)，我希望这会有所帮助。

Answer 2

您需要先从要导入它的任何组件导入它，然后只需将其作为组件添加到 JSX 中。我用recharts。

import { ComposedChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

return (`<ComposedChart
          layout="vertical"
          data={chartData} width={200} height={200}
          margin={{top: 2, right: 2, bottom: 2, left: 2}}>
          <XAxis type="number"/>
          <YAxis dataKey="name" type="category"/>
          <Tooltip/>
          <CartesianGrid stroke='#f5f5f5'/>
          <Bar dataKey='pv' barSize={20} fill='#413ea0'/>
        </ComposedChart> ) `