多个图表渲染时由于动画机制导致渲染错误
- 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/quiet-sunset-7povw)
### Steps to reproduce
点击 update, 第二个单图渲染没有完成且结果错误
### What is expected?
正确渲染单图
### What is actually happening?
单图未正确渲染
| Environment | Info |
|---|---|
| f2 | 3.4.4 |
| System | Window10 17763.864 |
| Browser | Chrome 78.0.3904.108 |
---
怀疑是 src/animation/detail.js / src/animation/group.js 两个插件问题, timeline 使用了模块级别的 scopes,但是每个插件又会重新创建一个 timeline。当其中一个销毁时 timeline 会停止,如果这个时候有其他单图使用 timeline 且动画没有完成时,实际上销毁的 timeline 是其他单图的 timeline. 会造成渲染停止,渲染结果错误。
临时解决方案,修改源码打包:
1. 使用一个引用计数器
```
let referenceCharts = 0
```
2. 单图初始化时
```
timeline = timeline || new Timeline();
referenceCharts += 1
```
3. 单图销毁时
```
referenceCharts -= 1
if (referenceCharts <= 0) {
timeline.stop();
}
```
Contributor guide
Assessment
This issue has not been assessed yet.