简介

阅读时间约 2 分钟
g6 banner

Coverage Status npm package NPM downloads Percentage of issues still open

English Introduction

什么是 G6

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。
img

基于 G6,用户可以快速搭建自己的 图分析图编辑 应用。

如果您还没有使用过 G6, 建议通过 快速上手 抢先体验 G6 的魅力。

imgimgimg

imgimgimg

强大的布局

img

强大的动画及交互

G6 的特性

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

  • 优秀的性能:支持大规模图数据的交互与探索;
  • 丰富的元素:内置丰富的节点与边元素,自由配置,支持自定义;
  • 可控的交互:内置 10+ 交互行为,支持自定义交互;
  • 强大的布局:内置了 10+ 常用的图布局,支持自定义布局;
  • 便捷的组件:优化内置组件功能及性能;
  • 友好的体验:根据用户需求分层梳理文档,支持 TypeScript 类型推断。

除了默认好用、配置自由的内置功能,元素、交互、布局均具有高可扩展的自定义机制。

img

丰富的图元素

G6 文档

快速上手

img
// 定义数据源
const data = {
  // 点集
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 200,
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  // 边集
  edges: [
    // 表示一条从 node1 节点连接到 node2 节点的边
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

// 创建 G6 图实例
const graph = new G6.Graph({
  container: 'mountNode', // 指定图画布的容器 id
  // 画布宽高
  width: 800,
  height: 500,
});
// 读取数据
graph.data(data);
// 渲染图
graph.render();

更详细的内容请参考 快速上手 文档。

友情链接

官方独立产品:Graphin

Graphin 取名意为 Graph Insight(图的分析洞察),是一个基于 G6 封装的 React 组件库,专注在关系可视分析领域,简单高效,开箱即用。

结合前端库的第三方实现:

G6 图可视化交流群

欢迎各界 G6 使用者、图可视化爱好者加入 G6 图可视化交流群G6 图可视化交流二群(钉钉群,使用钉钉扫一扫加入)讨论与交流。Graphin 的使用者,爱好者请加入 Graphin's Group Chat

G6 图可视化交流群 已满员,该群会不定期移除不活跃的成员。

由于维护精力有限,G6 图可视化交流群 仅供社区同学相互交流,不进行答疑。欢迎对 G6 感兴趣的同学加入到答疑中来,非常感谢!

如何贡献

请让我们知道您要解决或贡献什么,所以在贡献之前请先提交 issues 描述 bug 或建议。
成为一个贡献者前请阅读 代码贡献规范

License