新版本特性

🏖️ 全新设计图配置范式

G6 5.0 重新设计了图配置范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。

仅需快速了解基本核心概念，即可快速上手 G6，快速实现图可视化。

😰 4.0 配置项 嵌套结构复杂，语义化能力较弱

{
  defaultNode: {
    size: 30,
    style: {
      fill: 'steelblue',
      stroke: '#666',
      lineWidth: 1
    },
    labelCfg: {
      style: {
        fill: '#fff',
      }
    }
  },
  nodeStateStyles: {
    hover: {
      fill: 'lightsteelblue'
    }
  },
  modes: {
    default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
  },
}

😄 5.0 配置项 结构清晰，易于理解

{
  node: {
    style: {
      size: 30,
      fill: 'steelblue',
      stroke: '#666',
      lineWidth: 1
      labelFill: '#fff',
    },
    state: {
      hover: {
        fill: 'lightsteelblue'
      }
    }
  },
  behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
}

🔨 全新 API 设计

G6 5.0 采用了更加简洁、易用的 API 设计，更加符合现代前端框架的设计风格。

🌲 合并图与树图

树图本质上是一种单向无环图，G6 5.0 融合了图与树图的设计，降低了理解和使用成本。

现在，你可以在 G6 中直接使用 Graph 来实例化绘制树图，而不需要再使用 TreeGraph，仅需指定布局为树图布局即可。

此外，G6 提供了 treeToGraphData 工具方法，帮助你快速将树图数据转换为图数据。

import { Graph, treeToGraphData } from '@antv/g6';

const data = {
  id: 'root',
  children: [
    { id: 'node1', children: [{ id: 'node1-1' }, { id: 'node1-2' }] },
    { id: 'node2', children: [{ id: 'node2-1' }, { id: 'node2-2' }] },
  ],
};

const graph = new Graph({
  container: 'container',
  layout: {
    type: 'compact-box',
    direction: 'TB',
  },
  data: treeToGraphData(data),
  edge: {
    type: 'cubic-vertical',
  },
});

graph.render();

import * as g6 from '@antv/g6';
import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  width: 200,
  height: 200,
  autoFit: 'view',
  data: g6.treeToGraphData({
    id: 'root',
    children: [
      { id: 'node1', children: [{ id: 'node1-1' }, { id: 'node1-2' }] },
      { id: 'node2', children: [{ id: 'node2-1' }, { id: 'node2-2' }] },
    ],
  }),
  layout: {
    type: 'compact-box',
    direction: 'TB',
  },
  node: {
    style: {
      ports: [{ placement: 'center' }],
    },
  },
  edge: {
    type: 'cubic-vertical',
  },
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}

🌆 多渲染器支持

G6 5.0 采用了新一代设计的 @antv/g 渲染引擎，提供了 Canvas SVG WebGL 多种渲染器支持，并且分层画布支持不同渲染器的混合使用。

import { Renderer } from '@antv/g-webgl';
import { Graph } from '@antv/g6';

const graph = new Graph({
  // ... 其他配置
  // 使用 WebGL 渲染器
  renderer: () => new Renderer(),
});

🚀 高性能布局

G6 5.0 采用了全新布局引擎，部分布局提供 Rust 实现，提供了更高性能的布局计算。另有布局支持 WebGPU 加速。

🚀 高性能布局需要安装 @antv/layout-wasm 包

import { ForceAtlas2Layout, initThreads, supportsThreads } from '@antv/layout-wasm';
import { Graph, register, ExtensionCategory } from '@antv/g6';

register(ExtensionCategory.LAYOUT, 'forceatlas2-wasm', ForceAtlas2Layout);

const supported = await supportsThreads();
const threads = await initThreads(supported);

const graph = new Graph({
  // ... 其他配置
  layout: {
    type: 'forceatlas2-wasm',
    threads,
    // ... 其他布局配置
  },
});

GPU 加速布局需要安装 @antv/layout-gpu 包

import { FruchtermanLayout } from '@antv/layout-gpu';
import { Graph, register, ExtensionCategory } from '@antv/g6';

register(ExtensionCategory.LAYOUT, 'fruchterman-gpu', FruchtermanLayout);

const graph = new Graph({
  // ... 其他配置
  layout: {
    type: 'fruchterman-gpu',
    // ... 其他布局配置
  },
});

🎨 多主题机制

G6 5.0 内置了亮色、暗色两套主题，并可基于使用场景进行灵活定制，具体可参考自定义主题。

🌍 3D 大图

G6 5.0 提供了 3D 大图渲染、布局、交互能力，从 @antv/g6-extension-3d 中引入 3D 元素、渲染器、交互等注册即可使用，详见：使用 3D。

💪 插件优化增强

G6 5.0 对现有插件进行了优化增强，解除了 Graph 与插件之间的耦合，并优化配置的同时提供了更加丰富了能力。

敬请前往插件体验更多插件的能力。

💼 优化包体积

得益于 G6 5.0 良好的模块化的设计以及扩展注册机制，对于未使用的模块，不会被打包到最终的构建文件中，减小了包体积。

与 4.0 相比，UMD 包体积从 1.8 MB 减小到 0.96 MB，减小了近 50%。