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

[Runtus]

Describe the bug / 问题描述

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

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 = `<h4>Custom Content</h4>`;
                        // items.forEach((item) => {
                        //     result += `<p>Type: ${item.data.label}</p>`;
                        // });
                        return `<h4>Custom Content</h4>`;
                    },
                }
            ],
            behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element',
                {
                type: 'hover-activate',
                degree: 1
            },
            ],
        });
        graph.render();

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

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

如果我把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 / 其他

[petercat-assistant[bot]]

感谢您提供详细的代码示例和问题描述。根据您的描述，当设置layout.animation为false时，donut节点的渲染出现问题，需要交互后才能正确显示。这似乎是一个渲染上的问题，可能与动画的初始化或渲染机制有关。

为了帮助您解决这个问题，您可以尝试以下几种方法：

1. 检查渲染顺序：确保在设置layout.animation为false时，所有节点和边的数据已经完全加载并准备好进行渲染。

2. 手动刷新：在graph.render()之后，尝试调用graph.refresh()或graph.updateLayout()以确保图形的布局和渲染是最新的。

3. 事件监听：在节点渲染后，监听节点的afterrender事件，确保节点在渲染完成后进行必要的更新。

如果这些方法仍然无法解决问题，可能需要进一步查看G6的渲染机制或等待官方的修复。您也可以考虑在GitHub上提交一个问题报告，以便开发团队能够更好地了解和解决这个问题。

如果您需要进一步的帮助或有其他问题，请随时告诉我。

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.