0

我目前有一个带有自定义工具提示的工作散点图组件，效果很好：

<ResponsiveScatterPlot
                data={rawData.filter((item) => !hiddenIds.includes(item.id))}
                margin={{ top: 40, right: 140, bottom: 70, left: 90 }}
                xScale={{ type: 'linear', min: -1, max: 1 }}
                yScale={{ type: 'linear', min: -1, max: 1 }}
                blendMode="multiply"
                axisTop={null}
                axisRight={null}
                axisBottom={{
                    orient: 'bottom',
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                }}
                axisLeft={{
                    orient: 'left',
                    tickSize: 5,
                    tickPadding: 5,
                    tickRotation: 0,
                }}

                tooltip={(node) => {
                    return (
                        <div style={theme.tooltip.container}>
                            <strong>
                                {`Label: ${node.node.data.serieId}`}
                                <br />
                            </strong>
                            {`Id: ${node.node.data.caption}`}
                        </div>
                    )
                }}

现在，我想添加一个切换按钮来一次显示/隐藏所有工具提示，以使可视化更容易/更好的可读性，但我不知道如何处理它？似乎没有任何设置可以允许这样做，至少从我发现的情况来看是这样。我也不知道如何遍历散点图中的所有节点以手动添加 html 对象。

因此，我们的想法是有一个切换按钮来显示/隐藏所有工具提示。

4

0 回答 0