G6

A Graph Visualization Framework in JavaScript

ChartingGraph
antvis/G6g6.antv.vision@antv/g6

README

G6：图分析引擎


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

English README

什么是 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';

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

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

  53. graph.data(data);
  54. graph.render();
  55. ```
Edit compassionate-lalande-5lxm7

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

开发


  1. ``` sh
  2. $ npm install

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

  7. # build the packages
  8. $ npm run build:all

  10. # if you wanna watch one of the packages, e.g. packages/core
  11. $ cd ./packages/core
  12. $ npm run watch

  14. # run test case
  15. $ npm test

  17. # run test case in watch mode
  18. npm test -- --watch ./tests/unit/algorithm/find-path-spec
  19. DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
  20. ```

文档


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

React 项目集成


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

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

G6 图可视化交流群


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

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


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



如何贡献


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

License


MIT license.