Comment activer l'info-bulle sur React-vis?

Question

Comment activer l'info-bulle sur React-vis?

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

Je ne vois pas infobulle Vizualisation, comment puis-je voir un outil au survol de la carte? Dans le cas de SunBurst, il y a un exemple sur la page Uith github, et vous devez recalculer la position de l'info-bulle en fonction de l'angle de votre point de donnée qui n'est pas super pratique.

Answer 1

Vous devez ajouter manuellement une info-bulle si vous en voulez une! React-vis essaie de ne pas faire d'hypothèses sur la façon dont vous allez l'utiliser, il essaie simplement de vous offrir une plateforme flexible. Vous pouvez voir un exemple de la façon de le faire ici: https://github.com/uber/react-vis/blob/master/showcase/sunbursts/sunburst-with-tooltips.js mais je peux donner un exemple rapide ici aussi:

<Sunburst hideRootNode colorType="literal" data={data} height={300} width={350}> <Hint value={hoveredValue} /> </Sunburst> Où hoveredValues ​​est une valeur de vol stationnaire appropriée (peut-être recueilli d'un auditeur de vol stationnaire sur le sunburst elle-même) . Vous devrez peut-être modifier la valeur que vous obtenez de vous sur la méthode de vol stationnaire

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

J'ai ouvert un PR pour ajouter le contenu de cette réponse à la documentation sunburst (# 552), qui je l'espère aide.

Answer 2

Vous devez l'importer depuis le composant que vous importez d'abord, puis l'ajouter en tant que composant dans JSX. J'ai utilisé des recharges.

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