Графики Победы с несколькими строками и подсказками

Question

Я делаю график, который должен масштабировать и отображать подсказки для каждой точки данных. В документации Victory есть многострочный график с всплывающими подсказками, однако, если вы настраиваете набор данных, всплывающие подсказки перекрываются. Я обнаружил, что VictoryPortal - это механизм для преодоления этого, но, похоже, что даже в связанном примере он использует VictoryPortal. (Реквизит подсказки имеет renderInPortal: true,)

Чтобы преодолеть это, я создал вторую группу VictoryGroup после Lines/Scatters, которая представляла собой просто Scatter всех наборов данных и объединила их. opacity: 0 так что выглядело, как будто вы наводили исходную точку рассеяния. Этот подход работает, но я чувствую, что должен быть лучший, более чистый способ, которого я здесь скучаю. Я не мог понять, как заставить фрагмент работать с Victory, вот код, о котором идет речь:

Метод визуализации линий / разбросов для отдельных наборов данных в группе:

renderLine = (m, i) => (
this.state.s[i]
  ? <VictoryGroup
    key={i}
    color={m.color}
    data={m.data}
    labels={(d) => `y: ${d.y}\nx: ${d.x}`}
    labelComponent={
        <VictoryTooltip
          cornerRadius={0}
          style={{ fontSize: 10 }}
        />}
    >
      <VictoryLine />
      <VictoryScatter size={(d, a) => a ? 8 : 3} />
    </VictoryGroup>
  : null
)

И мой метод рендеринга:

render() {
const { renderLine } = this
return (
  <div style={{ width: '50vw', margin: '0 auto' }}>
    <VictoryChart
      height={400}
      width={400}
      padding={30}
      containerComponent={<VictoryZoomContainer />}>
      <VictoryAxis
        domain={{ x: [-180, 180] }}
        standalone
        label={'Angle (°)'}
        style={axisStyle}
        crossAxis={false}
        orientation={'bottom'}
        axisLabelComponent={
          <VictoryLabel orientation={'top'} y={'97%'} verticalAnchor={'end'} />
        }
        gridComponent={
          <Line
            style={{
              ...axisStyle.grid,
              transform: 'translate3d(0,100%,0)'
            }}
          />
        }
        tickCount={12}
        tickLabelComponent={<VictoryLabel dy={-5} />}
      />
      <VictoryAxis
        dependentAxis
        orientation={'left'}
        label={'Discriminiation (dB)'}
        axisLabelComponent={
          <VictoryLabel orientation={'left'} x={15} />
        }
        standalone
        offsetX={30}
        style={axisStyle}
      />
    {masterData.map((d, i) => renderLine(d, i))}
    <VictoryGroup
      color={'rgba(0,0,0,0)'}
      data={[...dataSet, ...dataSet2, ...dataSet3, ...dataSet4]}
      labels={(d) => `y: ${d.y}\nx: ${d.x}`}
      labelComponent={
          <VictoryTooltip
            cornerRadius={0}
            style={{ fontSize: 10 }}
          />}
    >
      <VictoryScatter size={(d, a) => a ? 8 : 3} />
    </VictoryGroup>
    </VictoryChart>
</div>
);
}

Любой вклад или совет будет принята с благодарностью. Заранее спасибо!

Answer 1

Я начал с аналогичного решения, но в итоге получил некоторые успешные результаты с компонентом VoronoiContainer и с помощью всплывающей подсказки.

https://formidable.com/open-source/victory/docs/victory-voronoi-container/

Вы должны поместить контейнер Voronoi в качестве компонента контейнера в VictoryChart.

С этим методом VictoryScatter не требуется.