AntV G6庫：構(gòu)建高效大數(shù)據(jù)量組織架構(gòu)圖
處理包含數(shù)千節(jié)點的組織架構(gòu)圖時，性能和可視化至關(guān)重要。本文介紹如何利用AntV G6庫及其緊湊樹布局算法(compactBox)，高效渲染大規(guī)模組織架構(gòu)圖。
需要注意的是，如此龐大的組織架構(gòu)圖在實際應(yīng)用中并不常見。通常，組織架構(gòu)圖側(cè)重于部門和職位關(guān)系，而非每個員工的詳細信息。如果您的數(shù)據(jù)包含過多細節(jié)，建議重新審視數(shù)據(jù)結(jié)構(gòu)的設(shè)計。
然而，如果您確實需要處理大量數(shù)據(jù)，G6的compactBox布局算法是一個理想選擇。經(jīng)測試，它能流暢處理3000個節(jié)點的組織架構(gòu)圖。
以下代碼示例展示了如何使用G6庫和compactBox布局創(chuàng)建組織架構(gòu)圖：
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布局，并自定義了節(jié)點標簽位置和旋轉(zhuǎn)角度，以及節(jié)點大小和間距。 通過調(diào)整getVGap和getHGap參數(shù)，可以微調(diào)布局的緊湊程度。 此外，代碼還包含了節(jié)點折疊/展開、畫布拖拽和縮放等交互功能，提升用戶體驗。 通過AntV G6庫，您可以輕松構(gòu)建高效、易于交互的大規(guī)模組織架構(gòu)圖可視化應(yīng)用。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
