g6/packages/site/docs/manual/introduction.zh.md

185 lines
5.7 KiB
Markdown
Raw Normal View History

2023-02-02 10:31:36 +08:00
---
title: 简介
order: 0
redirect_from:
- /zh/docs/manual
---
![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png)
2023-02-02 10:31:36 +08:00
[![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')
2023-02-02 10:31:36 +08:00
[English README](README.en-US.md)
2023-02-02 10:31:36 +08:00
## 什么是 G6
[G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。
2023-02-02 10:31:36 +08:00
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*zTjwQaXokeQAAAAAAAAAAABkARQnAQ' width=550 alt='' />
2023-02-02 10:31:36 +08:00
基于 G6用户可以快速搭建自己的 **图分析****图编辑** 应用。
## 🎉 G6 的特性 (5.0 Beta)
2023-02-02 10:31:36 +08:00
G6 作为一款专业的图可视化引擎,具有以下特性:
2023-02-02 10:31:36 +08:00
- 易扩展:七大插件化模块(见下图);
- 样式、动画规范,信息分层(见下图);
- 内置亮色、暗色主题,主题可自定义;动画易配置(见下图);
- 高性能布局:内置了 10+ 常用的图布局,支持 GPU、Rust 并行计算,支持自定义布局;
- 可控的交互:内置 10+ 交互行为,支持自定义交互;
- 友好的体验:根据用户需求分层梳理文档,支持 TypeScript 类型推断;
- 运行时切换多渲染器Canvas、SVG、WebGL
- 3D 大图:
2023-02-02 10:31:36 +08:00
GIF 未完整加载,[点此看原图](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qPrmQrdV77gAAAAAAAAAAAAADmJ7AQ/original)
2023-02-02 10:31:36 +08:00
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*IUOnSbLisyoAAAAAAAAAAAAADmJ7AQ/original" width=600 height=334 alt='' />
2023-02-02 10:31:36 +08:00
> 3D 大图
2023-02-02 10:31:36 +08:00
GIF 未完整加载,[点此看原图](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BFvQ4r3P7UAAAAAAAAAAAAADmJ7AQ/original)
2023-02-02 10:31:36 +08:00
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*tPPGSokdSYsAAAAAAAAAAAAADmJ7AQ/original" width=600 height=367 alt='' />
> 动画规范与信息分层
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*QjJoSbD7GTwAAAAAAAAAAAAADmJ7AQ/original" width=800 height=226 alt='' />
> 内置主题与自定义主题
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*x7NTT5_baKYAAAAAAAAAAAAADmJ7AQ/original" width=400 height=218 alt='' />
> 七大插件化模块
2023-02-02 10:31:36 +08:00
- 丰富的元素:内置丰富的节点与边元素,自由配置,支持自定义;
- 便捷的组件:优化内置组件功能及性能;
- 支持 TreeShaking 减少包体积。
2023-02-02 10:31:36 +08:00
除了默认好用、配置自由的内置功能,元素、交互、布局均具有高可扩展的自定义机制。
## 安装 (5.0 Beta)
2023-02-02 10:31:36 +08:00
```bash
2023-08-31 20:02:14 +08:00
$ npm install @antv/g6@5.0.0-beta.1
```
## 使用 (5.0 Beta)
【TODOapi link】图配置 Specification 类型见https://github.com/antvis/G6/blob/v5/packages/g6/src/types/spec.ts
2023-02-02 10:31:36 +08:00
【TODOapi link】Graph API 见https://github.com/antvis/G6/blob/2b44df189dd2e851447ba5a09541c372b49cd658/packages/g6/src/types/graph.ts#L23
2023-02-02 10:31:36 +08:00
【TODObeta demo】最简单的图 Demo
2023-02-02 10:31:36 +08:00
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*M-MTRaLiZN0AAAAAAAAAAAAADmJ7AQ/original" width=437 height=138 alt='' />
2023-02-02 10:31:36 +08:00
[![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/musing-matan-q255po?fontsize=14&hidenavigation=1&theme=dark)
```js
import G6 from '@antv/g6';
2023-02-02 10:31:36 +08:00
const data = {
nodes: [
{
id: 'node1',
data: {
label: 'Node 1',
x: 150,
y: 150,
},
2023-02-02 10:31:36 +08:00
},
{
id: 'node2',
data: {
label: 'Node 2',
x: 400,
y: 150,
},
2023-02-02 10:31:36 +08:00
},
],
edges: [
{
id: 'edge1',
2023-02-02 10:31:36 +08:00
source: 'node1',
target: 'node2',
data: {
label: 'Edge 1',
},
2023-02-02 10:31:36 +08:00
},
],
};
const graph = new G6.Graph({
container: 'container',
width: 500,
2023-02-02 10:31:36 +08:00
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: {},
},
}),
2023-02-02 10:31:36 +08:00
});
```
## 开发 (5.0 Beta)
2023-02-02 10:31:36 +08:00
```bash
# 安装依赖
2023-02-02 10:31:36 +08:00
$ pnpm install
2023-02-02 10:31:36 +08:00
# 从项目根目录进入到 g6 包文件目录下
$ cd packages/g6
2023-02-02 10:31:36 +08:00
# 构建
$ npm run build
2023-02-02 10:31:36 +08:00
# 启动集成测试 demo
$ npm run dev
2023-02-02 10:31:36 +08:00
# 测试 lint
$ npm run lint
2023-02-02 10:31:36 +08:00
# 修复 lint
$ npm run fix
2023-02-02 10:31:36 +08:00
# 运行所有单元测试
$ npm run test:integration
2023-02-02 10:31:36 +08:00
# 运行单个单元测试:修改 package.json 中 test:integration_one 命令指定的测试文件目录,然后执行:
$ npm run test:integration_one
```
2023-02-02 10:31:36 +08:00
## 如何贡献
2023-02-02 10:31:36 +08:00
请让我们知道您要解决或贡献什么,所以在贡献之前请先提交 [issues](https://github.com/antvis/g6/issues) 描述 bug 或建议。
2023-02-02 10:31:36 +08:00
### 赏金猎人计划
2023-02-02 10:31:36 +08:00
参见 [Issue Hunt 计划文档](https://github.com/antvis/G6/blob/v5-readme/ISSUEHUNT.md)。
2023-02-02 10:31:36 +08:00
## License
[MIT license](./LICENSE).