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库，您可以轻松构建高效、易于交互的大规模组织架构图可视化应用。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
