基于@antv/hierarchy去计算脑图节点，如果脑图节点数量过多按招下面去循环更新节点位置，会导致更新时间太长，是否有批量更新节点位置信息的接口或者其他方案

[zepingFISH]

问题描述

基于@antv/hierarchy去计算脑图节点，如果脑图节点数量过多按招下面去循环更新节点位置，会导致更新时间太长，是否有批量更新节点位置信息的接口或者其他方案
const node = graph.getCellById(data.id);
node.setProp({
data: {
...node.getData(), // 保留旧数据
width: data.width,
height: data.height,
children: data.children,
},
size: { width: data.width, height: data.height },
position: { x: hierarchyItem.x, y: hierarchyItem.y },
});

重现链接

没有

重现步骤

基于@antv/hierarchy去计算脑图节点，如果脑图节点数量过多按招下面去循环更新节点位置，会导致更新时间太长，是否有批量更新节点位置信息的接口或者其他方案
const node = graph.getCellById(data.id);
node.setProp({
data: {
...node.getData(), // 保留旧数据
width: data.width,
height: data.height,
children: data.children,
},
size: { width: data.width, height: data.height },
position: { x: hierarchyItem.x, y: hierarchyItem.y },
});

预期行为

有批量更新节点位置信息的接口或者其他解决方案

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[GaoFuhong]

batchUpdate批量更新，和你循环里面 setProp 效果应该差不多，另外你有多少个节点，可以开启下虚拟渲染（virtual: true）试试。

[zepingFISH]

batchUpdate批量更新，和你循环里面 setProp 效果应该差不多，另外你有多少个节点，可以开启下虚拟渲染（virtual: true）试试。

有使用文档吗？我是通过hierarchy去获得一个json数据，通过这个json数据去循环遍历
const dataOfCompactBox = Hierarchy.mindmap(xmindJsonData, { // mindmap compactBox
direction: 'LR', // 从左到右
getHGap() {
return 30; // 列向节点间的距离/2
},
getVGap(data: any) {
if (typeof vGap === 'function') {
return vGap(data);
}
return vGap; // 横向节点间的距离/2
},
});

const traverse = (hierarchyItem: any) => {
    const { data, children } = hierarchyItem;
    const node = graph.getCellById(data.id);
    if (node) {
        node.setProp({
            data: {
                ...node.getData(),          // 保留旧数据
                width: data.width,
                height: data.height,
                children: data.children,
            },
            size: { width: data.width, height: data.height },
            position: { x: hierarchyItem.x, y: hierarchyItem.y },
        });
    }
    (children || []).forEach((item: any) => {
        traverse(item);
    });
};

traverse(dataOfCompactBox);

这里traverse(dataOfCompactBox);如果脑图json节点数据里面有500以上甚至更多就会越来越慢，有batchUpdate的demo吗

[zepingFISH]

我代码类似下面这个，xmindJsonData是一个脑图的json数据，里面有很多json，有很多个节点（700以上），目前是通过Hierarchy去计算整体脑图中各个节点的位置信息，你说用batchUpdate去批量更新位置信息，要怎么去更新，有demo吗 import Hierarchy from ***@***.***/hierarchy'; const xmindJsonData = [] const dataOfCompactBox = Hierarchy.mindmap(xmindJsonData, { // mindmap compactBox direction: 'LR', // 从左到右 getHGap() { return 30; // 列向节点间的距离/2 }, getVGap(data: any) { if (typeof vGap === 'function') { return vGap(data); } return vGap; // 横向节点间的距离/2 }, }); const traverse = (hierarchyItem: any) => { const { data, children } = hierarchyItem; const node = graph.getCellById(data.id); if (node) { node.setProp({ data: { ...node.getData(), // 保留旧数据 width: data.width, height: data.height, children: data.children, }, size: { width: data.width, height: data.height }, position: { x: hierarchyItem.x, y: hierarchyItem.y }, }); } (children || []).forEach((item: any) => { traverse(item); }); }; traverse(dataOfCompactBox); 原始邮件 发件人：GaoFuhong ***@***.***> 发件时间：2025年11月26日 16:06 收件人：508175773 ***@***.***> 抄送：zepingFISH ***@***.***>, Author ***@***.***> 主题：Re: [antvis/X6] ***@***.***/hierarchy去计算脑图节点，如果脑图节点数量过多按招下面去循环更新节点位置，会导致更新时间太长，是否有批量更新节点位置信息的接口或者其他方案 (Issue #4923) GaoFuhong left a comment (antvis/X6#4923) batchUpdate批量更新，和你循环里面 setProp 效果应该差不多，另外你有多少个节点，可以开启下虚拟渲染（virtual: true）试试。 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[GaoFuhong]

batchUpdate批量更新，和你循环里面 setProp 效果应该差不多，另外你有多少个节点，可以开启下虚拟渲染（virtual: true）试试。

有使用文档吗？我是通过hierarchy去获得一个json数据，通过这个json数据去循环遍历 const dataOfCompactBox = Hierarchy.mindmap(xmindJsonData, { // mindmap compactBox direction: 'LR', // 从左到右 getHGap() { return 30; // 列向节点间的距离/2 }, getVGap(data: any) { if (typeof vGap === 'function') { return vGap(data); } return vGap; // 横向节点间的距离/2 }, });

const traverse = (hierarchyItem: any) => {
    const { data, children } = hierarchyItem;
    const node = graph.getCellById(data.id);
    if (node) {
        node.setProp({
            data: {
                ...node.getData(),          // 保留旧数据
                width: data.width,
                height: data.height,
                children: data.children,
            },
            size: { width: data.width, height: data.height },
            position: { x: hierarchyItem.x, y: hierarchyItem.y },
        });
    }
    (children || []).forEach((item: any) => {
        traverse(item);
    });
};

traverse(dataOfCompactBox);

这里traverse(dataOfCompactBox);如果脑图json节点数据里面有500以上甚至更多就会越来越慢，有batchUpdate的demo吗

500 个节点确实会卡顿，可以在业务层对节点 diff 下，看是否有些 node 不需要更新

[zepingFISH]

500+ 个节点是总的脑图数据，现在2.x版本以及前阵子3.x版本有支持了virtual:true（只渲染可视区域内的元素）。但是，整体的脑图各个节点的位置还是需要更新的，这避免不了，是否有什么api去获取可视区域的节点列表还是什么的，去局部更新，或者直接解决多节点的位置数据更新问题。现在看多节点数据更新还是没啥思路，即使开了virtual:true 原始邮件 发件人：GaoFuhong ***@***.***> 发件时间：2025年11月26日 16:34 收件人：antvis/X6 ***@***.***> 抄送：zepingFISH ***@***.***>, Author ***@***.***> 主题：Re: [antvis/X6] ***@***.***/hierarchy去计算脑图节点，如果脑图节点数量过多按招下面去循环更新节点位置，会导致更新时间太长，是否有批量更新节点位置信息的接口或者其他方案 (Issue #4923) GaoFuhong left a comment (antvis/X6#4923) batchUpdate批量更新，和你循环里面 setProp 效果应该差不多，另外你有多少个节点，可以开启下虚拟渲染（virtual: true）试试。 有使用文档吗？我是通过hierarchy去获得一个json数据，通过这个json数据去循环遍历 const dataOfCompactBox = Hierarchy.mindmap(xmindJsonData, { // mindmap compactBox direction: 'LR', // 从左到右 getHGap() { return 30; // 列向节点间的距离/2 }, getVGap(data: any) { if (typeof vGap === 'function') { return vGap(data); } return vGap; // 横向节点间的距离/2 }, }); const traverse = (hierarchyItem: any) => {    const { data, children } = hierarchyItem;    const node = graph.getCellById(data.id);    if (node) {        node.setProp({            data: {                ...node.getData(),          // 保留旧数据                width: data.width,                height: data.height,                children: data.children,            },            size: { width: data.width, height: data.height },            position: { x: hierarchyItem.x, y: hierarchyItem.y },        });    }    (children || []).forEach((item: any) => {        traverse(item);    }); }; traverse(dataOfCompactBox); 这里traverse(dataOfCompactBox);如果脑图json节点数据里面有500以上甚至更多就会越来越慢，有batchUpdate的demo吗 500 个节点确实会卡顿，可以在业务层对节点 diff 下，看是否有些 node 不需要更新 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[hustcc]

是 500 个节点更新数据卡的问题，感觉是另一个场景的性能问题。前面回答也没有提批量更新怎么做，或者文档地址。@GaoFuhong

@zepingFISH 最好能搞一个在线案例可以复现调试的。

[GaoFuhong]

500+ 个节点是总的脑图数据，现在2.x版本以及前阵子3.x版本有支持了virtual:true（只渲染可视区域内的元素）。但是，整体的脑图各个节点的位置还是需要更新的，这避免不了，是否有什么api去获取可视区域的节点列表还是什么的，去局部更新，或者直接解决多节点的位置数据更新问题。现在看多节点数据更新还是没啥思路，即使开了virtual:true

     原始邮件

发件人：GaoFuhong @.>
发件时间：2025年11月26日 16:34
收件人：antvis/X6 @.>
抄送：zepingFISH @.>, Author @.>
主题：Re: [antvis/X6] @.***/hierarchy去计算脑图节点，如果脑图节点数量过多按招下面去循环更新节点位置，会导致更新时间太长，是否有批量更新节点位置信息的接口或者其他方案 (Issue #4923)

GaoFuhong left a comment (antvis/X6#4923)

batchUpdate批量更新，和你循环里面 setProp 效果应该差不多，另外你有多少个节点，可以开启下虚拟渲染（virtual: true）试试。

有使用文档吗？我是通过hierarchy去获得一个json数据，通过这个json数据去循环遍历 const dataOfCompactBox = Hierarchy.mindmap(xmindJsonData, { // mindmap compactBox direction: 'LR', // 从左到右 getHGap() { return 30; // 列向节点间的距离/2 }, getVGap(data: any) { if (typeof vGap === 'function') { return vGap(data); } return vGap; // 横向节点间的距离/2 }, });
const traverse = (hierarchyItem: any) => {    const { data, children } = hierarchyItem;    const node = graph.getCellById(data.id);    if (node) {        node.setProp({            data: {                ...node.getData(),          // 保留旧数据                width: data.width,                height: data.height,                children: data.children,            },            size: { width: data.width, height: data.height },            position: { x: hierarchyItem.x, y: hierarchyItem.y },        });    }    (children || []).forEach((item: any) => {        traverse(item);    }); }; traverse(dataOfCompactBox);

这里traverse(dataOfCompactBox);如果脑图json节点数据里面有500以上甚至更多就会越来越慢，有batchUpdate的demo吗

500 个节点确实会卡顿，可以在业务层对节点 diff 下，看是否有些 node 不需要更新

—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you authored the thread.

官网没提供相应的 demo，批量更新使用：

graph.batchUpdate('layout', fn)

和你在循环里面使用 setProp 效果差不多，底层的批量更新性能后面我们处理下。当下你可以在自己的业务代码里面判断是否能减少不必要的节点更新，减少画布的重绘。

[zepingFISH]

@GaoFuhong 好的。“底层的批量更新性能后面我们处理下”这块是会提供一个api吗还是？可以让用户快速得更新完脑图每个节点的位置

[zepingFISH]

@GaoFuhong 可以更新在2.X版本里吗？目前看3.X版本还有许多bug，不稳定

[GaoFuhong]

@GaoFuhong 好的。“底层的批量更新性能后面我们处理下”这块是会提供一个api吗还是？可以让用户快速得更新完脑图每个节点的位置

对的

[GaoFuhong]

@GaoFuhong 可以更新在2.X版本里吗？目前看3.X版本还有许多bug，不稳定

3.x，里面的 bug 会处理的。

[zepingFISH]

@GaoFuhong 好的，感谢哈，希望可以稍微提点优先级，好了同步下。感谢 @hustcc 的支持👍

[zepingFISH]

@GaoFuhong 你好，请问一下“快速得更新完脑图每个节点的位置信息的api”这个功能什么时候支持，规划在什么时候上线，我这边后面也规划接入

[GaoFuhong]

@GaoFuhong 你好，请问一下“快速得更新完脑图每个节点的位置信息的api”这个功能什么时候支持，规划在什么时候上线，我这边后面也规划接入

预计下月吧。