我正在制作一个必须为每个数据点缩放和显示工具提示的图表。在 Victory 的文档中有一个带有工具提示的多折线图，但是如果您调整数据集，工具提示会重叠。我发现 VictoryPortal 是一种克服这个问题的机制，但似乎即使在链接的示例中，它也在使用 VictoryPortal。（工具提示的道具有renderInPortal: true,）
为了克服这个问题，我在 Lines/Scatters 之后创建了第二个 VictoryGroup，它只是所有数据集的 Scatter 组合并给出了它们opacity: 0，所以看起来你在原始 Scatter 点上悬停。这种方法有效，但感觉必须有一种更好、更清洁的方法，而我在这里缺少这种方法。我不知道如何使代码片段与 Victory 一起工作，所以这里是有问题的代码：
将单个数据集的 Lines/Scatters 呈现在一个组中的方法：
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>
);
}
任何意见或建议将不胜感激。提前致谢！