mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 02:38:20 +08:00
bd492eb35a
* docs: add readme for v5 * docs: update readme * docs: update v5 readme * docs: update gif url * chore: update readme gif * docs: update readme gif * docs: update readme gif * docs: update v5 readme
192 lines
7.3 KiB
Markdown
192 lines
7.3 KiB
Markdown
# G6: A Graph Visualization Framework in TypeScript
|
|
|
|
**v5 Online Demo**: https://g6.antv.antgroup.com/g6v5
|
|
|
|
|
|
|
|
[](https://travis-ci.org/antvis/g6) [](https://codecov.io/gh/antvis/G6)   [](https://www.npmjs.com/package/@antv/g6) [](https://npmjs.org/package/@antv/g6) [](http://isitmaintained.com/project/antvis/g6 "Percentage of issues still open")
|
|
|
|
[中文 README](README.md)
|
|
|
|
## What is G6
|
|
|
|
[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.
|
|
|
|
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' />
|
|
|
|
Developers are able to build graph visualization **analysis** applications or graph visualization **modeling** applications easily.
|
|
|
|
<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='' />
|
|
|
|
<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 alt='' /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HTasSJGC4koAAAAAAAAAAABkARQnAQ' height=150 alt='' />
|
|
|
|
> Powerful Animation and Interactions
|
|
|
|
<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='' />
|
|
|
|
<img src="https://gw.alipayobjects.com/zos/rmsportal/HQxYguinFOMIXrGQOABY.gif" height=150 alt='' /><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='' />
|
|
|
|
> Powerful Layouts
|
|
|
|
## Features (5.0 Alpha)
|
|
|
|
- Extensionable: All the modules (seven types) are integrated as plugins;
|
|
- Style and animation standards, supports level of details (see the graph below);
|
|
- Beautiful Built-in Theme and cound be customized (see the graph below);
|
|
- Layouts with Great Performance: More than 10 layout algorithms, supports GPU and Rust parallel computing, and custom layouts;
|
|
- Steerable Interactions: More than 10 basic interaction behaviors ;
|
|
- Friendly User Experience: Complete documents for different levels of user requirements. TypeScript supported.
|
|
- Multiple renderers: Canvas, SVG, WebGL;
|
|
- 3D Graph:
|
|
|
|
The gif is not fully loaded, [Click Here to See the Original Image](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qPrmQrdV77gAAAAAAAAAAAAADmJ7AQ/original)
|
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IUOnSbLisyoAAAAAAAAAAAAADmJ7AQ/original" width=600 height=334 alt='' />
|
|
|
|
> 3D Graph
|
|
|
|
The gif is not fully loaded, [Click Here to See the Original Image](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BFvQ4r3P7UAAAAAAAAAAAAADmJ7AQ/original)
|
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tPPGSokdSYsAAAAAAAAAAAAADmJ7AQ/original" width=600 height=367 alt='' />
|
|
|
|
> Animations and Level of Details
|
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*QjJoSbD7GTwAAAAAAAAAAAAADmJ7AQ/original" width=800 height=226 alt='' />
|
|
|
|
> Built-in Themes and Custom Themes
|
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*x7NTT5_baKYAAAAAAAAAAAAADmJ7AQ/original" width=400 height=218 alt='' />
|
|
|
|
> Seven Types of Plugins
|
|
|
|
- (TODO: migrate from v4) Abundant Built-in Items: Nodes and edges with free configurations;
|
|
- (TODO: migrate from v4) Convenient Components: Outstanding ability and performance;
|
|
|
|
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.
|
|
|
|
> Abundant Built-in Items
|
|
|
|
## Installation (5.0 Alpha)
|
|
|
|
```bash
|
|
$ npm install @antv/g6@5.0.0-alpha.4
|
|
```
|
|
|
|
## Usage (5.0 Alpha)
|
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*M-MTRaLiZN0AAAAAAAAAAAAADmJ7AQ/original" width=437 height=148 alt='' />
|
|
|
|
The configuration specification of the graph can be refered to: https://github.com/antvis/G6/blob/v5/packages/g6/src/types/spec.ts
|
|
|
|
Graph API: https://github.com/antvis/G6/blob/2b44df189dd2e851447ba5a09541c372b49cd658/packages/g6/src/types/graph.ts#L23
|
|
|
|
A simple graph demo:
|
|
|
|
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*M-MTRaLiZN0AAAAAAAAAAAAADmJ7AQ/original" width=437 height=138 alt='' />
|
|
|
|
[](https://codesandbox.io/embed/musing-matan-q255po?fontsize=14&hidenavigation=1&theme=dark)
|
|
|
|
```js
|
|
import G6 from "@antv/g6";
|
|
|
|
const data = {
|
|
nodes: [
|
|
{
|
|
id: "node1",
|
|
label: "Node 1",
|
|
data: {
|
|
x: 150,
|
|
y: 150,
|
|
},
|
|
},
|
|
{
|
|
id: "node2",
|
|
label: "Node 2",
|
|
data: {
|
|
x: 400,
|
|
y: 150,
|
|
},
|
|
},
|
|
],
|
|
edges: [
|
|
{
|
|
id: "edge1",
|
|
label: "Edge 1",
|
|
source: "node1",
|
|
target: "node2",
|
|
data: {},
|
|
},
|
|
],
|
|
};
|
|
|
|
const graph = new G6.Graph({
|
|
container: "container",
|
|
width: 500,
|
|
height: 500,
|
|
data,
|
|
node: (innerModel) => ({
|
|
...innerModel,
|
|
type: "circle",
|
|
data: {
|
|
...innerModel.data,
|
|
labelShape: {
|
|
text: innerModel.label,
|
|
},
|
|
labelBackgroundShape: {},
|
|
iconShape: {
|
|
img: "https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg",
|
|
},
|
|
},
|
|
}),
|
|
edge: (innerModel) => ({
|
|
...innerModel,
|
|
type: "line",
|
|
data: {
|
|
labelShape: {
|
|
text: innerModel.label,
|
|
},
|
|
labelBackgroundShape: {},
|
|
},
|
|
}),
|
|
});
|
|
```
|
|
|
|
## Development (5.0 Alpha)
|
|
|
|
```bash
|
|
# enter packages/g6 from root of project
|
|
$ cd packages/g6
|
|
|
|
# install dependencies
|
|
$ npm install
|
|
|
|
# build
|
|
$ npm run build
|
|
|
|
# start the integration demos
|
|
$ npm run dev
|
|
|
|
# run test case
|
|
$ npm run test
|
|
|
|
# run test case in watch mode
|
|
npm test -- --watch ./tests/unit/node-spec
|
|
DEBUG_MODE=1 npm test -- --watch ./tests/unit/node-spec
|
|
```
|
|
|
|
## Documents (5.0 Alpha)
|
|
|
|
The documents will be ready after the 5.0 version being stable.
|
|
|
|
## How to Contribute
|
|
|
|
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.
|
|
|
|
### Issue Hunt
|
|
|
|
Refer to the [Doc of Issue Hunt](https://github.com/antvis/G6/blob/v5-readme/ISSUEHUNT.en-US.md).
|
|
|
|
## License
|
|
|
|
[MIT license](./LICENSE).
|