G6

A Graph Visualization Framework in JavaScript

README

G6:图分析引擎


undefined
travis-ci codecov typescript MIT npm package NPM downloads Percentage of issues still open


什么是 G6


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


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


强大的动画及交互



强大的布局


G6 的特性


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

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

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


丰富的图元素


安装


  1. ``` sh
  2. $ npm install @antv/g6
  3. ```

使用



  1. ``` js
  2. import G6 from '@antv/g6';

  3. const data = {
  4.   nodes: [
  5.     {
  6.       id: 'node1',
  7.       label: 'Circle1',
  8.       x: 150,
  9.       y: 150,
  10.     },
  11.     {
  12.       id: 'node2',
  13.       label: 'Circle2',
  14.       x: 400,
  15.       y: 150,
  16.     },
  17.   ],
  18.   edges: [
  19.     {
  20.       source: 'node1',
  21.       target: 'node2',
  22.     },
  23.   ],
  24. };

  25. const graph = new G6.Graph({
  26.   container: 'container',
  27.   width: 500,
  28.   height: 500,
  29.   defaultNode: {
  30.     type: 'circle',
  31.     size: [100],
  32.     color: '#5B8FF9',
  33.     style: {
  34.       fill: '#9EC9FF',
  35.       lineWidth: 3,
  36.     },
  37.     labelCfg: {
  38.       style: {
  39.         fill: '#fff',
  40.         fontSize: 20,
  41.       },
  42.     },
  43.   },
  44.   defaultEdge: {
  45.     style: {
  46.       stroke: '#e2e2e2',
  47.     },
  48.   },
  49. });

  50. graph.data(data);
  51. graph.render();
  52. ```
Edit compassionate-lalande-5lxm7

更多关于 G6 使用的问题,请参考快速上手

开发


  1. ``` sh
  2. $ npm install

  3. # lerna bootstrap for multiple packages
  4. $ npm run bootstrap

  5. # build the packages
  6. $ npm run build:all

  7. # if you wanna watch one of the packages, e.g. packages/core
  8. $ cd ./packages/core
  9. $ npm run watch

  10. # run test case
  11. $ npm test

  12. # run test case in watch mode
  13. npm test -- --watch ./tests/unit/algorithm/find-path-spec
  14. DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
  15. ```

文档


- 入门教程- 核心概念- 扩展阅读- API

React 项目集成


针对 React 项目集成,我们有一款单独的产品推荐:Graphin,它是基于 G6 封装的 React 组件库,专注在关系分析领域,简单高效,开箱即用。

目前 Graphin 在商业图分析项目中均有良好的实践,具体查看《谁在使用 Graphin》

G6 图可视化交流群


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

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


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



如何贡献


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

License