plotly / plotly/react-plotly.js
Tooltip misaligned when using global data object, layout prop and onHover that manipulates state
未关闭
还没有人认领这个 Issue。
- 主要语言
- JavaScript
- 星标
- 1.1k
- 派生
- 138
- 平均合并
- 3 天 2 小时
- 30 天内合并 PR
- 4
描述
The tooltip hover functionality gets messed up when the following conditions are met:
- You got your own data object which isn't reinitialized every time the plot is rendered.
- You have declared a custom onHover function
- You update state to get the component to re-render
- You have defined the layout property in the Plot component
This sandbox reproduces the error
https://codesandbox.io/s/qx5qr2m5x4
Hover one of the points in the plot. The tooltip will be shown briefly and afterwards the rest of the points will be misaligned towards the axes.
Versions used:
plotly.js 1.37.1
react-plotly.js 2.2.0
Tested on:
chrome
edge
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先使用列出的 plotly.js 和 react-plotly.js 版本运行链接的 CodeSandbox,然后在自定义 onHover 更新 state 时将鼠标悬停在一个点上,以复现错位问题。跟踪 Plot 组件对 global data object、layout prop 和 rerender 的处理。完成标准是 tooltip 正确显示,并且其余点在 state 更新后仍保持对齐。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react
- 领域
- data-visualization, frontend
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100