Как включить всплывающую подсказку на 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> ) `