我正在制作一个图表,必须缩放并显示每个数据点的工具提示。在 Victory 的文档中,有一个 带有工具提示的多线图表,但如果调整数据集,工具提示会重叠。我发现 VictoryPortal 是克服这个问题的机制,但即使在链接的示例中,它也在使用 VictoryPortal。(工具提示的 props 有
为了克服这个问题,我在 Lines/Scatters 后创建了第二个 VictoryGroup,只是 Scatters 将所有数据集组合在一起,并给它们
用于将单个数据集的 Lines/Scatters 渲染到组中的方法:
我的渲染方法:
任何输入或建议都将不胜感激。提前感谢!
renderInPortal: true,
)为了克服这个问题,我在 Lines/Scatters 后创建了第二个 VictoryGroup,只是 Scatters 将所有数据集组合在一起,并给它们
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>
);
}
任何输入或建议都将不胜感激。提前感谢!