Geom 包含多个图形时重绘动画错误(线图)
- Dominant language
- JavaScript
- Stars
- 8k
- Forks
- 637
- PR merge metrics
- No merged PRs in 30d
Description
- [x] I have searched the [issues](https://github.com/antvis/f2/issues) of this repository and believe that this is not a duplicate.
### Reproduction link
[](https://codesandbox.io/s/fancy-forest-hmxkn)
### Steps to reproduce
点击重绘按钮,看到左边断开的线段动画错误
### What is expected?
数据没有变更时重绘不更新动画
### What is actually happening?
重绘 geom 更新,导致跳动
| Environment | Info |
|---|---|
| f2 | 3.4.4 |
| System | Window10 17763.864 |
| Browser | Chrome 78.0.3904.108 |
---
`F2/src/animation/detail.js` 插件问题,getShapes 方法 line 159 处获取 shape id,当存在空值时,线图会分段绘制,导致存在多个 geomShapes,多个 shape 使用相同的 id 会导致 line 255 错误
临时解决方案,修改代码打包
```
shape._id = _getShapeId(geom, shape.get('origin')._origin, geomIdx) + index;
```
Contributor guide
Research direction
Reproduce the animation problem using the linked CodeSandbox, then inspect F2/src/animation/detail.js, especially getShapes around line 159 and the handling near line 255. Confirm the behavior when a line chart contains gaps and multiple geom shapes share an id. Done means redraws with unchanged data no longer animate or cause the line segments to jump.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100