How to use AntV's G6 library to achieve efficient automatic layout of large-data organizational structure diagrams?

AntV G6 library: Building an efficient organizational structure chart of large data volumes

Performance and visualization are critical when working with an organization chart containing thousands of nodes. This article introduces how to use the AntV G6 library and its compact tree layout algorithm ( compactBox ) to efficiently render large-scale organizational structure charts.

It should be noted that such a huge organizational structure diagram is not common in practical applications. Typically, the organizational chart focuses on department and position relationships, rather than the details of each employee. If your data contains too much detail, it is recommended to revisit the design of the data structure.

However, if you do need to process a lot of data, the G6's compactBox layout algorithm is ideal. After testing, it can smoothly process the organizational structure diagram of 3000 nodes.

The following code example shows how to create an organization chart using the G6 library and compactBox layout:

 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;
};

This code uses compactBox layout and customizes the node label position and rotation angle, as well as the node size and spacing. By adjusting getVGap and getHGap parameters, you can fine-tune the compactness of the layout. In addition, the code also includes interactive functions such as node collapse/expand, canvas drag and zoom to improve the user experience. With the AntV G6 library, you can easily build efficient, easy-to-interactive large-scale organizational chart visualization applications.

The above is the detailed content of How to use AntV's G6 library to achieve efficient automatic layout of large-data organizational structure diagrams?. For more information, please follow other related articles on the PHP Chinese website!