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

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
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他