微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

nivo 散点图 -> 如何以编程方式显示所有工具提示

如何解决nivo 散点图 -> 如何以编程方式显示所有工具提示

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

<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',max: 1 }}
                blendMode="multiply"
                axisTop={null}
                axisRight={null}
                axisBottom={{
                    orient: 'bottom',tickSize: 5,tickPadding: 5,tickRotation: 0,}}
                axisLeft={{
                    orient: 'left',}}

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

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

所以,我们的想法是有一个可以显示/隐藏所有工具提示的切换按钮。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。