如何在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是一个适当的悬浮值(可能是从sunburst it self上的悬停侦听器获取的)。您可能需要修改从您的悬停方法中获得的值

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> ) `