antvis / antvis/F2

多个图表渲染时由于动画机制导致渲染错误

Open
#734 3 comments 0 reactions 1 assignee Claimed by @zengyue View on GitHub
accept bug
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/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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.