antvis / antvis/G6

[Bug]: Setting layout.animation false cause donut render bugs.

Open
#6,873 1 comment 0 reactions 0 assignees View on GitHub
waiting for maintainer
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

当设置`layout.animation`为false时,会导致donut节点渲染bug,不会直接渲染出donut效果,需要去对节点进行交互时,才能得到donut节点,例如下面这段代码。

```javascript
import { Graph, iconfont } from '@antv/g6';

const style = document.createElement('style');
const data = {
nodes: [
{id: 'node1', data: {label: '节点1', value: 0}},
{id: 'node2', data: {label: '节点2', value: 20}},
{id: 'node3', data: {label: '节点3', value: 40}},
{id: 'node4', data: {label: '节点4', value: 70}},
{id: 'node5', data: {label: '节点5', value: 80}},
],
edges: [{source: 'node1', target: 'node2', data: {label: '关系', value: 1}, id: "edge1"},
{source: 'node1', target: 'node3', data: {label: '关系', value: 1}, id: "edge2"},
{source: 'node1', target: 'node4', data: {label: '关系1', value: 1}, id: "edge3"},
{source: 'node1', target: 'node5', data: {label: '关系2', value: 1}, id: "edge4"}]
}
// data.nodes.forEach((node)=>{
// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// // @ts-expect-error
// node['id']=node['id']+'';
// return node;
// })
// data.edges.forEach(edge=>{
// edge["source"]+='';
// edge["target"]+='';
// return edge;
// })
// data.edges=data.edges.slice(0,1000);
console.log(data);
const graph = new Graph({

container: 'container',
autoFit: 'view',
data,
node: {
type: 'donut',
style: {
fill: '#DB9D0D',
donuts: (item) => {
console.log("item", item)
return [
{ value: 70, color: 'red' },
{ value: 30, color: 'white' },
{ value: 50, color: 'white' },
{ value: 50, color: 'blue' },
];
},
},
// palette: {
// field: 'group',
// color: 'tableau',
// },
// state: {
// hover: {
// fill: "red"
// },
// active: {
// fill: "red"
// },
// },
},
layout: {
animation:false,
type: 'force', // 速度衰减系数,控制收敛速度
// worker: true, // 启用 Web Worker
// alpha: 0.1, // 降低精度
// velocityDecay: 0.6, // 增加速度衰减
// forces: {
// collision: {strength: 0.5} // 降低碰撞强度
// },

},
plugins: [
{
type: 'tooltip',
getContent: (e, items) => {
// let result = `

Custom Content

`;
// items.forEach((item) => {
// result += `

Type: ${item.data.label}

`;
// });
return `

Custom Content

`;
},
}
],
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element',
{
type: 'hover-activate',
degree: 1
},
],
});
graph.render();

```

它一开始渲染出来的图可视化是这样的:

![Image](https://github.com/user-attachments/assets/05a33601-50a2-4d95-952a-b2a7d08ca37a)

当我hover节点时,会出现正常的donut节点。

![Image](https://github.com/user-attachments/assets/d740359f-72a7-40d3-bf7d-8621ede2b366)

如果我把`animation:false`设置在顶层,那么图可视化能直接得到正常的结果。

不知道这种情况是否符合预期?

### Reproduction link / 复现链接

_No response_

### Steps to Reproduce the Bug or Issue / 重现步骤

_No response_

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start at the Graph configuration, especially the donut node type, layout.animation setting, and graph.render() call. Compare the initial rendering with layout.animation set to false against the behavior after hovering a node and against top-level animation:false. Done means donut nodes render correctly immediately without requiring interaction.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.