如何在数据中调整节点大小

[tubehao]

尝试在数据中设置size字段来调整节点大小，但是渲染出的图节点仍是一样大的
我的代码：

function visualizeGraph(graphData, container) {
            const graph = new G6.Graph({
                container: container,
                width: container.offsetWidth,
                height: container.offsetHeight,
                autoFit: 'view',
                layout: {
                    type: 'force',
                    linkDistance: 50,
                    kr: 40,
                    preventoverlap: true,
                },
                behaviors: ['drag-node', 'zoom-canvas', 'drag-canvas'],
                node: {
                    // size: 20, // 这里的默认大小现在将被覆盖
                    color: '#5B8FF9',
                    style: {
                        labelText: (d) => d.id,
                    }
                },
                edge: {
                    type: 'line',
                    style: {
                        stroke: '#000000',
                    },
                },
            });

            // 计算每个节点的度，并设置节点大小
            const degrees = graphData.nodes.map(node => ({
                id: node.id,
                degree: graphData.edges.reduce((acc, edge) => {
                    if (edge.source === node.id || edge.target === node.id) {
                        return acc + 1; // 为每个连接到当前节点的边加一
                    }
                    return acc;
                }, 0)
            }));

            // 更新节点数据以反映节点的度
            graphData.nodes.forEach(node => {
                const nodeDegreeInfo = degrees.find(degreeInfo => degreeInfo.id === node.id);
                node.size = 20 + nodeDegreeInfo.degree * 5; // 基础大小为10，每增加一个度，大小增加5
            });
            graphData.nodes.forEach(node => {
                console.log(graphData.nodes);
            });

            graph.setData(graphData);
            graph.render();
        }

渲染结果：

在控制台打印的数据

[resetsix]

点击展开/关闭

对于rect矩形，size的值是一个数组(array[width,height])

对于circle圆形，size的值是一个number

矩形和圆形修改 size 实测都是生效的

具体文档
BaseNode 节点通用样式：https://g6-next.antv.antgroup.com/api/elements/nodes/base-node#size

矩形：https://g6-next.antv.antgroup.com/api/elements/nodes/rect

圆形：https://g6-next.antv.antgroup.com/api/elements/nodes/circle

以上内容基于antv/g6 v5.x版本

[Aarebecca]

样式字段位于 datum.style.size 而非 datum.size，这一点有别于 4.X

[resetsix]

样式字段位于 datum.style.size 而非 datum.size，这一点有别于 4.X

是样式映射对象的 size 吗

[tubehao]

感谢，已解决，代码调整如下

    function visualizeGraph(graphData, container) {
        const graph = new G6.Graph({
            container: container,
            width: container.offsetWidth,
            height: container.offsetHeight,
            autoFit: 'view',
            layout: {
                type: 'force',
                linkDistance: 50,
                kr: 40,
                preventoverlap: true,
            },
            behaviors: ['drag-node', 'zoom-canvas', 'drag-canvas'],
            node: {
                // 移除此处的 size，使用下面的 getNodeStyle 方法动态设置
                color: '#5B8FF9',
                style: (node) => ({
                    size: node.style.size,  // 确保每个节点的 size 是动态更新的
                    labelText: node.id.toString(),
                })
            },
            edge: {
                type: 'line',
                style: {
                    stroke: '#000000',
                },
            },
        });

        // 计算每个节点的度，并设置节点大小
        const degrees = graphData.nodes.map(node => ({
            id: node.id,
            degree: graphData.edges.reduce((acc, edge) => {
                if (edge.source === node.id || edge.target === node.id) {
                    return acc + 1;  // 为每个连接到当前节点的边加一
                }
                return acc;
            }, 0)
        }));

        // 更新节点数据以反映节点的度
        graphData.nodes.forEach(node => {
            const nodeDegreeInfo = degrees.find(degreeInfo => degreeInfo.id === node.id);
            node.style = {
                size: 20 + nodeDegreeInfo.degree * 5  // 基础大小为20，每增加一个度，大小增加5
            };
        });

        // 设置数据并渲染图表
        graph.setData(graphData);
        graph.render();
    }

[liaodalin19903]

样式字段位于 datum.style.size 而非 datum.size，这一点有别于 4.X

是样式映射对象的 size 吗

请问一下，什么是样式映射和样式映射的回调函数？