简介

简介 - 图1 简介 - 图2简介 - 图3简介 - 图4npm packageNPM downloadsPercentage of issues still open

English README

什么是 G6

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

68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f7a6f732f726d73706f7274616c2f485178596775696e464f4d49587247514f4142592e676966.gif

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

如果你还没有使用过 G6， 建议通过快速上手先体验一下 G6 的魅力。

简介 - 图9简介 - 图10简介 - 图11

简介 - 图12简介 - 图13简介 - 图14

G6 的特性

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

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

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

G6 文档

快速上手

简介 - 图17

  1. // 定义数据源
  2. const data = {
  3.   // 点集
  4.   nodes: [
  5.     {
  6.       id: 'node1',
  7.       x: 100,
  8.       y: 200,
  9.     },
  10.     {
  11.       id: 'node2',
  12.       x: 300,
  13.       y: 200,
  14.     },
  15.   ],
  16.   // 边集
  17.   edges: [
  18.     // 表示一条从 node1 节点连接到 node2 节点的边
  19.     {
  20.       source: 'node1',
  21.       target: 'node2',
  22.     },
  23.   ],
  24. };
  26. // 创建 G6 图实例
  27. const graph = new G6.Graph({
  28.   container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
  29.   // 画布宽高
  30.   width: 800,
  31.   height: 500,
  32. });
  33. // 读取数据
  34. graph.data(data);
  35. // 渲染图
  36. graph.render();

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

友情链接

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

G6 图可视化交流群

欢迎各界 G6 使用者、图可视化爱好者加入 G6 图可视化交流群（钉钉群，使用钉钉扫一扫加入）讨论与交流。 简介 - 图18

如何贡献

请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 issues 描述 bug 或建议。

成为一个贡献者前请阅读 代码贡献规范.

License

MIT license.