English | 简体中文

G6：图可视分析引擎

G6 5.0 beta 版本已经发布，还有不少的细节体验问题，欢迎试用和反馈，线上产品暂时谨慎使用，6.6 发布正式版本！

介绍 • 案例 • 教程 • API

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画、主题、插件等图可视化和分析的基础能力。基于 G6，用户可以快速搭建自己的图可视化分析应用，让关系数据变得简单，透明，有意义。

✨ 特性

G6 作为一款专业的图可视化引擎，具有以下特性：

丰富的元素：内置丰富的节点、边、Combo UI 元素，样式配置丰富，支持数据回调，且具备有灵活扩展自定义元素的机制。
可控的交互：内置 10+ 交互行为，且提供丰富的各类事件，便于扩展自定义的交互行为。
高性能布局：内置 10+ 常用的图布局，部分基于 GPU、Rust 并行计算提升性能，支持自定义布局。
便捷的组件：优化内置组件功能及性能，且有灵活的扩展性，便于业务实现定制能力。
多主题色板：提供了亮色、暗色两套内置主题，在 AntV 新色板前提下，融入 20+ 常用社区色板。
多环境渲染：发挥 G 能力，支持 Canvas、SVG 以及 WebGL，和 Node.js 服务端渲染；基于 WebGL 提供强大 3D 渲染和空间交互的插件包。
React 体系：利用 React 前端生态，支持 React 节点，大大丰富 G6 的节点呈现样式。

🔨 开始使用

可以通过 NPM 或 Yarn 等包管理器来安装。

$ npm install @antv/g6@next

$ yarn add @antv/g6@next

成功安装之后，可以通过 import 导入 Graph 对象。

<div id="container"></div>

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

// 准备数据
const data = {
  nodes: [/* your nodes data */],
  edges: [/* your edges data */],
};

// 初始化图表实例
const graph = new Graph({
  container: 'container',
  autoFit: 'view',
  data,
  node: {
    palette: {
      type: 'group',
      field: 'cluster',
    }
  },
  layout: {
    type: 'force',
  },
  behaviors: ['drag-canvas', 'drag-node'],
});

// 渲染可视化
graph.render();

一切顺利，你可以得到下面的力导图!

🌍 生态

Ant Design Charts： React 图表库，基于 G2、G6、X6、L7。
Graphin：基于 G6 的 React 简单封装，以及图可视化应用研发的 SDK。

更多生态开源项目，欢迎 PR 收录进来。

📮 贡献

问题反馈：使用过程遇到的 G6 的问题，欢迎提交 Issue，并附上可以复现问题的最小案例代码。
贡献指南：如何参与到 G6 的开发和贡献。
想法讨论：在 GitHub Discussion 上或者钉钉群里面讨论。

📄 License

MIT.

import { Graph } from '@antv/g6'; // 准备数据 const data = { nodes: [/* your nodes data */], edges: [/* your edges data */], }; // 初始化图表实例 const graph = new Graph({ container: 'container', autoFit: 'view', data, node: { palette: { type: 'group', field: 'cluster', } }, layout: { type: 'force', }, behaviors: ['drag-canvas', 'drag-node'], }); // 渲染可视化 graph.render();