带有多条线和工具提示的胜利图表答案

【问题标题】：Victory Charts with multiple lines and tooltips带有多条线和工具提示的胜利图表
【发布时间】：2017-08-22 16:06:29
【问题描述】：

我正在制作一个必须为每个数据点缩放和显示工具提示的图表。在 Victory 的文档中有一个 multi-line chart with tooltips 但是如果您调整数据集，工具提示会重叠。我发现 VictoryPortal 是一种克服这个问题的机制，但似乎即使在链接的示例中，它也在使用 VictoryPortal。（tooltip的props有renderInPortal: true,）

为了克服这个问题，我在 Lines/Scatters 之后创建了第二个 VictoryGroup，它只是所有数据集的 Scatters 组合并给了它们 opacity: 0 所以它看起来你悬停在原来的 Scatter 点上。这种方法有效，但感觉必须有一种更好、更清洁的方法，而我在这里缺少这种方法。我不知道如何使 sn-p 与 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>
);
}

任何意见或建议将不胜感激。提前致谢！

【问题讨论】：

标签： css reactjs victory-charts

【解决方案1】：

我从一个类似的解决方案开始，但最后我使用 VoronoiContainer 组件并使用那里的工具提示取得了一些成功。

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

您必须将 VoronoiContainer 作为容器组件放入 VictoryChart。

使用该方法不需要 VictoryScatter。

【讨论】：