1 | # G6:图分析引擎
|
2 |
|
3 | ![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png)
|
4 |
|
5 | [![travis-ci](https://img.shields.io/travis/antvis/g6.svg)](https://travis-ci.org/antvis/g6) [![codecov](https://codecov.io/gh/antvis/G6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/G6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/g6.svg)](https://npmjs.org/package/@antv/g6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6 'Percentage of issues still open')
|
6 |
|
7 | [English README](README.en-US.md)
|
8 |
|
9 | ## 什么是 G6
|
10 |
|
11 | [G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。
|
12 |
|
13 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' />
|
14 |
|
15 | 基于 G6,用户可以快速搭建自己的 **图分析** 或 **图编辑** 应用。
|
16 |
|
17 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zau8QJcVpDQAAAAAAAAAAABkARQnAQ' height=200 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RIlETY_S6IoAAAAAAAAAAABkARQnAQ' height=200 alt='' />
|
18 |
|
19 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ' height=150 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DifbSahOblAAAAAAAAAAAABkARQnAQ' height=150 /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HTasSJGC4koAAAAAAAAAAABkARQnAQ' height=150 alt='' />
|
20 |
|
21 | > 强大的动画及交互
|
22 |
|
23 | <img src="https://user-images.githubusercontent.com/6113694/44995293-02858600-afd5-11e8-840c-349e4730d63d.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*I9OdTbXJIi0AAAAAAAAAAABkARQnAQ" height=150 alt='' /><img src="https://user-images.githubusercontent.com/6113694/44995332-2ba61680-afd5-11e8-8cab-db0e9d08ceb7.gif" height=150 alt='' />
|
24 |
|
25 | <img src="https://gw.alipayobjects.com/zos/rmsportal/HQxYguinFOMIXrGQOABY.gif" height=150><img src="https://gw.alipayobjects.com/zos/rmsportal/nAugyFgrbrUWPmDIDiQm.gif" height=150 alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xoufSYcjK2AAAAAAAAAAAABkARQnAQ" height=150 alt='' />
|
26 |
|
27 | > 强大的布局
|
28 |
|
29 | ## G6 的特性
|
30 |
|
31 | G6 作为一款专业的图可视化引擎,具有以下特性:
|
32 |
|
33 | - 丰富的元素:内置丰富的节点与边元素,自由配置,支持自定义;
|
34 | - 可控的交互:内置 10+ 交互行为,支持自定义交互;
|
35 | - 强大的布局:内置了 10+ 常用的图布局,支持自定义布局;
|
36 | - 便捷的组件:优化内置组件功能及性能;
|
37 | - 友好的体验:根据用户需求分层梳理文档,支持 TypeScript 类型推断。
|
38 |
|
39 | 除了默认好用、配置自由的内置功能,元素、交互、布局均具有高可扩展的自定义机制。
|
40 |
|
41 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Y0c6S7cxjVkAAAAAAAAAAABkARQnAQ' width=800 height=200 alt='' />
|
42 |
|
43 | > 丰富的图元素
|
44 |
|
45 | ## 安装
|
46 |
|
47 | ```bash
|
48 | $ npm install @antv/g6
|
49 | ```
|
50 |
|
51 | ## 使用
|
52 |
|
53 | <img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*khbvSrptr0kAAAAAAAAAAABkARQnAQ" width=437 height=148 alt='' />
|
54 |
|
55 | ```js
|
56 | import G6 from '@antv/g6';
|
57 |
|
58 | const data = {
|
59 | nodes: [
|
60 | {
|
61 | id: 'node1',
|
62 | label: 'Circle1',
|
63 | x: 150,
|
64 | y: 150,
|
65 | },
|
66 | {
|
67 | id: 'node2',
|
68 | label: 'Circle2',
|
69 | x: 400,
|
70 | y: 150,
|
71 | },
|
72 | ],
|
73 | edges: [
|
74 | {
|
75 | source: 'node1',
|
76 | target: 'node2',
|
77 | },
|
78 | ],
|
79 | };
|
80 |
|
81 | const graph = new G6.Graph({
|
82 | container: 'container',
|
83 | width: 500,
|
84 | height: 500,
|
85 | defaultNode: {
|
86 | type: 'circle',
|
87 | size: [100],
|
88 | color: '#5B8FF9',
|
89 | style: {
|
90 | fill: '#9EC9FF',
|
91 | lineWidth: 3,
|
92 | },
|
93 | labelCfg: {
|
94 | style: {
|
95 | fill: '#fff',
|
96 | fontSize: 20,
|
97 | },
|
98 | },
|
99 | },
|
100 | defaultEdge: {
|
101 | style: {
|
102 | stroke: '#e2e2e2',
|
103 | },
|
104 | },
|
105 | });
|
106 |
|
107 | graph.data(data);
|
108 | graph.render();
|
109 | ```
|
110 |
|
111 | [![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
112 |
|
113 | 更多关于 G6 使用的问题,请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
|
114 |
|
115 | ## 开发
|
116 |
|
117 | ```bash
|
118 | $ npm install
|
119 |
|
120 | # lerna bootstrap for multiple packages
|
121 | $ npm run bootstrap
|
122 |
|
123 | # build the packages
|
124 | $ npm run build:all
|
125 |
|
126 | # if you wanna watch one of the packages, e.g. packages/core
|
127 | $ cd ./packages/core
|
128 | $ npm run watch
|
129 |
|
130 | # run test case
|
131 | $ npm test
|
132 |
|
133 | # run test case in watch mode
|
134 | npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
135 | DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
136 | ```
|
137 |
|
138 | ## 文档
|
139 |
|
140 | - <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
|
141 | - <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
|
142 | - <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
143 | - <a href='https://g6.antv.antgroup.com/api/graph' target='_blank'>API</a>
|
144 |
|
145 | ## React 项目集成
|
146 |
|
147 | 针对 React 项目集成,我们有一款单独的产品推荐:[Graphin](https://graphin.antv.vision),它是基于 G6 封装的 React 组件库,专注在关系分析领域,简单高效,开箱即用。
|
148 |
|
149 | 目前 Graphin 在商业图分析项目中均有良好的实践,具体查看[《谁在使用 Graphin》](https://github.com/antvis/Graphin/issues/212)
|
150 |
|
151 | ## G6 图可视化交流群
|
152 |
|
153 | 欢迎各界 G6 使用者、图可视化爱好者加入 **G6 图可视化交流群** 及 **G6 图可视化交流二群**(钉钉群,使用钉钉扫一扫加入)讨论与交流。Graphin 的使用者,爱好者请加入 **Graphin's Group Chat**
|
154 |
|
155 | > **G6 图可视化交流群** 已满员,该群会不定期移除不活跃的成员。
|
156 |
|
157 | > 由于维护精力有限,**G6 图可视化交流群** 仅供社区同学相互交流,不进行答疑。欢迎对 G6 感兴趣的同学加入到答疑中来,非常感谢!
|
158 |
|
159 | <p >
|
160 | <a href="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-RO_R7SCvroAAAAAAAAAAAAAARQnAQ" >
|
161 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-RO_R7SCvroAAAAAAAAAAAAAARQnAQ' style='width:250px;display:inline-block;vertical-align:top;' alt='' />
|
162 | </a>
|
163 | <a href="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*hzfaSrAj0jkAAAAAAAAAAABkARQnAQ" >
|
164 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*hzfaSrAj0jkAAAAAAAAAAABkARQnAQ' style='width:250px;display:inline-block;vertical-align:top;' alt='' />
|
165 | </a>
|
166 | <a href="https://graphin.antv.vision/" >
|
167 | <img src='https://camo.githubusercontent.com/5e6624abcdde991f9fd89fce4933ad133a48d8fb603d1852c670da329df73ef7/68747470733a2f2f67772e616c697061796f626a656374732e636f6d2f6d646e2f726d735f3430326331612f616674732f696d672f412a2d717a6f54704c672d3163414141414141414141414141414152516e4151' style='width:250px;display:inline-block;vertical-align: top;' alt='' />
|
168 | </a>
|
169 | </p>
|
170 |
|
171 | ## 如何贡献
|
172 |
|
173 | 请让我们知道您要解决或贡献什么,所以在贡献之前请先提交 [issues](https://github.com/antvis/g6/issues) 描述 bug 或建议。
|
174 |
|
175 | ## License
|
176 |
|
177 | [MIT license](./LICENSE).
|