Question

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

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

我没有看到关于vizualisation的工具提示，我怎么能看到悬停图表的工具？

在SunBurst的情况下，Uber github页面上有一个例子，你必须根据数据点的角度重新计算工具提示的位置，这不是很方便。

Answer 1

如果需要，您需要手动添加工具提示！ React-vis试图不对你将如何使用它做出假设，它只是试图提供一个灵活的平台。你可以在这里看一个如何做到这一点的例子：documentation但我也可以在这里给出一个简单的例子：

<Sunburst hideRootNode colorType="literal" data={data} height={300} width={350}> <Hint value={hoveredValue} /> </Sunburst> 其中hoveredValues是一个合适的悬停值（可能是从它自己的sunburst上的悬停听众那里获得的）。您可能需要修改悬停方法

上的值

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

我已经开了一个公关，将这个答案的内容添加到森伯斯特文档（＃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> ) `

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

2 个答案: