6

React-vis でツールチップを有効にするには?

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

ビジュアライゼーションのツールチップが表示されません。チャートをホバーするとツールを表示するにはどうすればよいですか?

SunBurst の場合、Uber github ページに例があり、データポイントの角度に基づいてツールチップの位置を再計算する必要がありますが、これはあまり便利ではありません。

4

2 に答える 2

3

ツールチップが必要な場合は、手動で追加する必要があります。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)
  };
}

この回答の内容をサンバーストのドキュメント (#552) に追加するために PR を開きました。

于 2017-08-16T07:58:58.737 に答える