AntV G6库：构建高效大数据量组织架构图
处理包含数千节点的组织架构图时，性能和可视化至关重要。本文介绍如何利用AntV G6库及其紧凑树布局算法(compactBox)，高效渲染大规模组织架构图。
需要注意的是，如此庞大的组织架构图在实际应用中并不常见。通常，组织架构图侧重于部门和职位关系，而非每个员工的详细信息。如果您的数据包含过多细节，建议重新审视数据结构的设计。
然而，如果您确实需要处理大量数据，G6的compactBox布局算法是一个理想选择。经测试，它能流畅处理3000个节点的组织架构图。
以下代码示例展示了如何使用G6库和compactBox布局创建组织架构图：
import G6 from '@antv/g6';
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
.then(res => res.json())
.then(jdata => {
const data = { id: 'demo', children: Array.from({ length: 100 }).map(() => genUuidList(jdata)) };
const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;
const graph = new G6.TreeGraph({
container: 'container',
width,
height,
linkCenter: true,
modes: {
default: [
{
type: 'collapse-expand',
onChange: (item, collapsed) => {
item.getModel().collapsed = collapsed;
return true;
},
},
'drag-canvas',
'zoom-canvas',
],
},
defaultNode: {
size: 26,
anchorPoints: [[0, 0.5], [1, 0.5]],
},
defaultEdge: {
type: 'cubic-vertical',
},
layout: {
type: 'compactBox',
direction: 'TB',
getId: d => d.id,
getHeight: () => 16,
getWidth: () => 16,
getVGap: () => 80,
getHGap: () => 20,
},
});
graph.node(node => ({
label: node.id,
labelCfg: {
position: node.children ? 'right' : 'bottom',
offset: 5,
style: {
rotate: node.children ? 0 : Math.PI / 2,
textAlign: 'start',
},
},
}));
graph.data(data);
graph.render();
graph.fitView();
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight);
};
});
let count_i = 0;
const genUuidList = obj => {
const newObj = { ...obj, id: crypto.randomUUID() };
if (newObj.children) {
newObj.children = newObj.children.map(genUuidList);
}
count_i++;
return newObj;
};
此代码使用了compactBox布局，并自定义了节点标签位置和旋转角度，以及节点大小和间距。 通过调整getVGap和getHGap参数，可以微调布局的紧凑程度。 此外，代码还包含了节点折叠/展开、画布拖拽和缩放等交互功能，提升用户体验。 通过AntV G6库，您可以轻松构建高效、易于交互的大规模组织架构图可视化应用。
