1 | # G6: A Graph Visualization Framework in TypeScript.
|
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/master.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 | [中文 README](README-zh_CN.md)
|
8 |
|
9 | ## What is G6
|
10 |
|
11 | [G6](https://github.com/antvis/g6) is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the relationships, and help people to obtain the insight of relational data.
|
12 |
|
13 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 />
|
14 |
|
15 | Developers are able to build graph visualization **analysis** applications or graph visualization **modeling** applications easily.
|
16 |
|
17 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zau8QJcVpDQAAAAAAAAAAABkARQnAQ' height=200 /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*RIlETY_S6IoAAAAAAAAAAABkARQnAQ' height=200 />
|
18 |
|
19 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*cDzXR4jIWr8AAAAAAAAAAABkARQnAQ' height=150 /><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 />
|
20 |
|
21 | > Powerful Animation and Interactions
|
22 |
|
23 | <img src="https://user-images.githubusercontent.com/6113694/44995293-02858600-afd5-11e8-840c-349e4730d63d.gif" height=150><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*I9OdTbXJIi0AAAAAAAAAAABkARQnAQ" height=150><img src="https://user-images.githubusercontent.com/6113694/44995332-2ba61680-afd5-11e8-8cab-db0e9d08ceb7.gif" height=150>
|
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><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*xoufSYcjK2AAAAAAAAAAAABkARQnAQ" height=150>
|
26 |
|
27 | > Powerful Layouts
|
28 |
|
29 | ## Features
|
30 |
|
31 | - Abundant Built-in Items: Nodes and edges with free configurations;
|
32 | - Steerable Interactions: More than 10 basic interaction behaviors ;
|
33 | - Powerful Layout: More than 10 layout algorithms;
|
34 | - Convenient Components: Outstanding ability and performance;
|
35 | - Friendly User Experience: Complete documents for different levels of user requirements. TypeScript supported.
|
36 |
|
37 | G6 concentrates on the principle of 'good by default'. In addition, the custom mechanism of the item, interation behavior, and layout satisfies the customazation requirements.
|
38 |
|
39 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Y0c6S7cxjVkAAAAAAAAAAABkARQnAQ' width=800 height=200 />
|
40 |
|
41 | > Abundant Built-in Items
|
42 |
|
43 | ## Installation
|
44 |
|
45 | ```bash
|
46 | $ npm install @antv/g6
|
47 | ```
|
48 |
|
49 | ## Usage
|
50 |
|
51 | <img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*khbvSrptr0kAAAAAAAAAAABkARQnAQ" width=437 height=148 />
|
52 |
|
53 | ```js
|
54 | import G6 from '@antv/g6';
|
55 |
|
56 | const data = {
|
57 | nodes: [
|
58 | {
|
59 | id: 'node1',
|
60 | label: 'Circle1',
|
61 | x: 150,
|
62 | y: 150,
|
63 | },
|
64 | {
|
65 | id: 'node2',
|
66 | label: 'Circle2',
|
67 | x: 400,
|
68 | y: 150,
|
69 | },
|
70 | ],
|
71 | edges: [
|
72 | {
|
73 | source: 'node1',
|
74 | target: 'node2',
|
75 | },
|
76 | ],
|
77 | };
|
78 |
|
79 | const graph = new G6.Graph({
|
80 | container: 'container',
|
81 | width: 500,
|
82 | height: 500,
|
83 | defaultNode: {
|
84 | shape: 'circle',
|
85 | size: [100],
|
86 | color: '#5B8FF9',
|
87 | style: {
|
88 | fill: '#9EC9FF',
|
89 | lineWidth: 3,
|
90 | },
|
91 | labelCfg: {
|
92 | style: {
|
93 | fill: '#fff',
|
94 | fontSize: 20,
|
95 | },
|
96 | },
|
97 | },
|
98 | defaultEdge: {
|
99 | style: {
|
100 | stroke: '#e2e2e2',
|
101 | },
|
102 | },
|
103 | });
|
104 |
|
105 | graph.data(data);
|
106 | graph.render();
|
107 | ```
|
108 |
|
109 | [![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)
|
110 |
|
111 | For more information of the usage, please refer to [Getting Started](https://antv-g6.gitee.io/en/docs/manual/getting-started).
|
112 |
|
113 | ## Development
|
114 |
|
115 | ```bash
|
116 | $ npm install
|
117 |
|
118 | # run test case
|
119 | $ npm test
|
120 |
|
121 | # run test case in watch mode
|
122 | npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
123 | DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
124 |
|
125 | # build watching file changes and run demos
|
126 | $ npm run demos
|
127 | ```
|
128 |
|
129 | ## Documents
|
130 |
|
131 | - <a href='https://g6.antv.vision/en/docs/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
132 | - <a href='https://g6.antv.vision/en/docs/manual/middle/overview' target='_blank'>Middle Guides</a>
|
133 | - <a href='https://g6.antv.vision/en/docs/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
134 | - <a href='https://g6.antv.vision/en/docs/api/Graph/' target='_blank'>API Reference</a>
|
135 |
|
136 | ## G6 Communication Group
|
137 |
|
138 | Users are welcome to join the **G6 Communication Group** or **G6 Communication Group-2** (They are DingTalk groups). We also welcome the github issues. The Group is full, join Group-2 instead.
|
139 |
|
140 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*LFppR6_BfdYAAAAAAAAAAABkARQnAQ' width=400 alt="">
|
141 |
|
142 | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*hzfaSrAj0jkAAAAAAAAAAABkARQnAQ' width=400 alt="">
|
143 |
|
144 | ## How to Contribute
|
145 |
|
146 | Please let us know what you are you going to help. Do check out [issues](https://github.com/antvis/g6/issues) for bug reports or suggestions first.
|
147 |
|
148 | To become a contributor, please follow our [contributing guide](https://github.com/antvis/g6/blob/master/CONTRIBUTING.md).
|
149 |
|
150 | ## License
|
151 |
|
152 | [MIT license](./LICENSE).
|