antvis / antvis/F2

Geom 包含多个图形时重绘动画错误(线图)

Open
#744 3 comments 0 reactions 0 assignees View on GitHub
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
[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.