mirror of
https://gitee.com/antv/g6.git
synced 2024-11-29 18:28:19 +08:00
refactor: adjust v4 site (#6426)
* refactor: adjust v4 site * chore: update build workflow * chore: update site links
This commit is contained in:
Aaron
GitHub
parent
49d2b5745a
commit
a7080c5e4f
16
.github/workflows/build.yml
vendored
16
.github/workflows/build.yml
vendored
@ -17,27 +17,15 @@ jobs:
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
node-version: 20
|
||||
|
||||
- uses: pnpm/action-setup@v2
|
||||
name: Install pnpm
|
||||
with:
|
||||
version: 8
|
||||
version: 9
|
||||
run_install: false
|
||||
|
||||
- uses: actions/cache@v3
|
||||
name: Setup pnpm cache
|
||||
id: cache
|
||||
with:
|
||||
path: |
|
||||
node_modules/
|
||||
packages/g6/node_modules/
|
||||
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-pnpm-store-
|
||||
|
||||
- name: Install Dependencies
|
||||
if: steps.cache.outputs.cache-hit != 'true'
|
||||
run: pnpm install --no-frozen-lockfile
|
||||
|
||||
- name: Run CI
|
||||
|
||||
22
README.md
22
README.md
@ -6,13 +6,7 @@
|
||||
|
||||
|
||||
|
||||
[](https://github.com/antvis/G6/actions/)
|
||||
[](https://coveralls.io/github/antvis/G6?branch=master)
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/@antv/g6)
|
||||
[](https://npmjs.org/package/@antv/g6)
|
||||
[](http://isitmaintained.com/project/antvis/g6)
|
||||
[](https://github.com/antvis/G6/actions/) [](https://coveralls.io/github/antvis/G6?branch=master)   [](https://www.npmjs.com/package/@antv/g6) [](https://npmjs.org/package/@antv/g6) [](http://isitmaintained.com/project/antvis/g6)
|
||||
|
||||
## What is G6
|
||||
|
||||
@ -110,7 +104,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
For more information of the usage, please refer to [Getting Started](https://g6.antv.antgroup.com/en/manual/getting-started).
|
||||
For more information of the usage, please refer to [Getting Started](https://g6-v4.antv.vision/en/manual/getting-started).
|
||||
|
||||
## Development
|
||||
|
||||
@ -138,10 +132,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## Documents
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/api/graph' target='_blank'>API Reference</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/api/graph' target='_blank'>API Reference</a>
|
||||
|
||||
## React project integration
|
||||
|
||||
@ -153,8 +147,8 @@ At present, Graphin has good practices in business graph analysis projects. For
|
||||
|
||||
Welcome to join the **G6 Communication Group**. We also welcome the github issues.
|
||||
|
||||
* DingTalk Group: 30088652
|
||||
* WeChat Group: Add WeChat **AntVG6** to join the group
|
||||
- DingTalk Group: 30088652
|
||||
- WeChat Group: Add WeChat **AntVG6** to join the group
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*j137TJmS1dEAAAAAAAAAAAAADmJ7AQ/original" width="200" />
|
||||
|
||||
|
||||
@ -6,13 +6,7 @@
|
||||
|
||||
|
||||
|
||||
[](https://github.com/antvis/G6/actions/)
|
||||
[](https://coveralls.io/github/antvis/G6?branch=master)
|
||||
|
||||
|
||||
[](https://www.npmjs.com/package/@antv/g6)
|
||||
[](https://npmjs.org/package/@antv/g6)
|
||||
[](http://isitmaintained.com/project/antvis/g6)
|
||||
[](https://github.com/antvis/G6/actions/) [](https://coveralls.io/github/antvis/G6?branch=master)   [](https://www.npmjs.com/package/@antv/g6) [](https://npmjs.org/package/@antv/g6) [](http://isitmaintained.com/project/antvis/g6)
|
||||
|
||||
## 什么是 G6
|
||||
|
||||
@ -112,7 +106,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6-v4.antv.vision/manual/getting-started)。
|
||||
|
||||
## 开发
|
||||
|
||||
@ -140,10 +134,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## 文档
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6.antv.antgroup.com/api/graph' target='_blank'>API</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6-v4.antv.vision/api/graph' target='_blank'>API</a>
|
||||
|
||||
## React 项目集成
|
||||
|
||||
@ -159,8 +153,8 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
> 由于维护精力有限，**G6 图可视化交流群** 仅供社区同学相互交流，不进行答疑。欢迎对 G6 感兴趣的同学加入到答疑中来，非常感谢！
|
||||
|
||||
* 钉钉群：30088652
|
||||
* 微信群：添加微信 **AntVG6** 联系进群
|
||||
- 钉钉群：30088652
|
||||
- 微信群：添加微信 **AntVG6** 联系进群
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*j137TJmS1dEAAAAAAAAAAAAADmJ7AQ/original" width="200" />
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
For more information of the usage, please refer to [Getting Started](https://g6.antv.antgroup.com/en/manual/getting-started).
|
||||
For more information of the usage, please refer to [Getting Started](https://g6-v4.antv.vision/en/manual/getting-started).
|
||||
|
||||
## Development
|
||||
|
||||
@ -134,10 +134,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## Documents
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/api/graph' target='_blank'>API Reference</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/api/graph' target='_blank'>API Reference</a>
|
||||
|
||||
## G6 Communication Group
|
||||
|
||||
@ -151,7 +151,6 @@ Welcome to join the **G6 Communication Group** or **G6 Communication Group-2** (
|
||||
|
||||
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.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT license](./LICENSE).
|
||||
|
||||
@ -110,7 +110,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6-v4.antv.vision/manual/getting-started)。
|
||||
|
||||
## 开发
|
||||
|
||||
@ -136,10 +136,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## 文档
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6.antv.antgroup.com/api/graph' target='_blank'>API</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6-v4.antv.vision/api/graph' target='_blank'>API</a>
|
||||
|
||||
## G6 图可视化交流群
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"graph visualization",
|
||||
"relational data"
|
||||
],
|
||||
"homepage": "https://g6.antv.antgroup.com/",
|
||||
"homepage": "https://g6-v4.antv.vision/",
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/g6/issues"
|
||||
},
|
||||
|
||||
@ -21,7 +21,7 @@ export type CommonInteractionEvent =
|
||||
| 'dragenter'
|
||||
| 'dragleave'
|
||||
| 'dragover'
|
||||
| 'dragout' // TODO: not in documentation page: https://g6.antv.antgroup.com/en/api/Event/
|
||||
| 'dragout' // TODO: not in documentation page: https://g6-v4.antv.vision/en/api/Event/
|
||||
| 'drop'
|
||||
| 'focus'
|
||||
| 'blur'
|
||||
@ -116,8 +116,8 @@ export type CanvasInteractionEvent =
|
||||
* Canvas Intereaction events
|
||||
*
|
||||
* @example
|
||||
* English: https://g6.antv.antgroup.com/en/api/Event
|
||||
* Chinese: https://g6.antv.antgroup.com/api/Event
|
||||
* English: https://g6-v4.antv.vision/en/api/Event
|
||||
* Chinese: https://g6-v4.antv.vision/api/Event
|
||||
*/
|
||||
export type GraphTimingEvents =
|
||||
| 'beforerender'
|
||||
@ -165,13 +165,7 @@ export type GraphTimingEvents =
|
||||
| 'beforedestroy'
|
||||
| 'afterdestroy';
|
||||
|
||||
type MobileInteractionEvent =
|
||||
| 'tap'
|
||||
| 'pinchstart'
|
||||
| 'pinmove'
|
||||
| 'panstart'
|
||||
| 'panmove'
|
||||
| 'panend'
|
||||
type MobileInteractionEvent = 'tap' | 'pinchstart' | 'pinmove' | 'panstart' | 'panmove' | 'panend';
|
||||
|
||||
export type NodeEventType = `node:${NodeInteractionEvent}`;
|
||||
export type EdgeEventType = `edge:${EdgeInteractionEvent}`;
|
||||
@ -185,9 +179,18 @@ export type MobileInteractionEventType = MobileInteractionEvent;
|
||||
* Graph interaction events
|
||||
*
|
||||
* @example
|
||||
* https://g6.antv.antgroup.com/en/api/Event#combo-interaction-event
|
||||
* https://g6-v4.antv.vision/en/api/Event#combo-interaction-event
|
||||
*/
|
||||
export type G6Event = NodeEventType | EdgeEventType | ComboEventType | CanvasEventType | GraphTimingEventType | MobileInteractionEventType | CommonInteractionEvent | CommonInteractionEvent | (string & {});
|
||||
export type G6Event =
|
||||
| NodeEventType
|
||||
| EdgeEventType
|
||||
| ComboEventType
|
||||
| CanvasEventType
|
||||
| GraphTimingEventType
|
||||
| MobileInteractionEventType
|
||||
| CommonInteractionEvent
|
||||
| CommonInteractionEvent
|
||||
| (string & {});
|
||||
|
||||
export interface IG6GraphEvent extends GraphEvent {
|
||||
item: Item | null;
|
||||
@ -328,11 +331,13 @@ export interface ModeOption {
|
||||
minZoom?: number;
|
||||
enableOptimize?: boolean;
|
||||
enableDebounce?: boolean;
|
||||
allowDragOnItem?: boolean | {
|
||||
node?: boolean,
|
||||
edge?: boolean,
|
||||
combo?: boolean
|
||||
};
|
||||
allowDragOnItem?:
|
||||
| boolean
|
||||
| {
|
||||
node?: boolean;
|
||||
edge?: boolean;
|
||||
combo?: boolean;
|
||||
};
|
||||
optimizeZoom?: number;
|
||||
multiple?: boolean;
|
||||
activeState?: string;
|
||||
@ -386,10 +391,10 @@ export interface States {
|
||||
|
||||
export interface StateStyles {
|
||||
[key: string]:
|
||||
| ShapeStyle
|
||||
| {
|
||||
[key: string]: ShapeStyle;
|
||||
};
|
||||
| ShapeStyle
|
||||
| {
|
||||
[key: string]: ShapeStyle;
|
||||
};
|
||||
}
|
||||
|
||||
// model types (node edge group)
|
||||
@ -464,7 +469,7 @@ export interface GraphOptions {
|
||||
size: number | number[];
|
||||
color: string;
|
||||
}> &
|
||||
ModelStyle;
|
||||
ModelStyle;
|
||||
|
||||
/**
|
||||
* 默认状态下边的配置，比如 type, size, color。会被写入的 data 覆盖。
|
||||
@ -474,7 +479,7 @@ export interface GraphOptions {
|
||||
size: number | number[];
|
||||
color: string;
|
||||
}> &
|
||||
ModelStyle;
|
||||
ModelStyle;
|
||||
|
||||
/**
|
||||
* Combo 默认配置
|
||||
@ -484,7 +489,7 @@ export interface GraphOptions {
|
||||
size: number | number[];
|
||||
color: string;
|
||||
}> &
|
||||
ModelStyle;
|
||||
ModelStyle;
|
||||
|
||||
nodeStateStyles?: StateStyles;
|
||||
|
||||
@ -624,10 +629,10 @@ export interface TreeGraphData {
|
||||
depth?: number;
|
||||
collapsed?: boolean;
|
||||
style?:
|
||||
| ShapeStyle
|
||||
| {
|
||||
[key: string]: ShapeStyle;
|
||||
};
|
||||
| ShapeStyle
|
||||
| {
|
||||
[key: string]: ShapeStyle;
|
||||
};
|
||||
stateStyles?: StateStyles;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
@ -786,7 +791,6 @@ export interface GroupNodeIds {
|
||||
[key: string]: string[];
|
||||
}
|
||||
|
||||
|
||||
export type DefaultBehaviorType = IG6GraphEvent | string | number | object;
|
||||
|
||||
export interface BehaviorOption {
|
||||
|
||||
@ -128,7 +128,7 @@ export const calculationItemsBBox = (items: Item[]) => {
|
||||
|
||||
/**
|
||||
* 若 edges 中存在两端点相同的边，使用 quadratic 边并自动计算 curveOffset 使它们不相互重叠
|
||||
* 文档: https://g6.antv.antgroup.com/en/api/Util
|
||||
* 文档: https://g6-v4.antv.vision/en/api/Util
|
||||
* @param edges 边数据集合
|
||||
* @param offsetDiff 相邻两边的 offset 之差
|
||||
* @param multiEdgeType
|
||||
@ -140,7 +140,7 @@ export const processParallelEdges = (
|
||||
offsetDiff = 15,
|
||||
multiEdgeType: string = 'quadratic',
|
||||
singleEdgeType: string = undefined,
|
||||
loopEdgeType: string = undefined
|
||||
loopEdgeType: string = undefined,
|
||||
) => {
|
||||
const len = edges.length;
|
||||
const cod = offsetDiff * 2;
|
||||
|
||||
@ -108,7 +108,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6-v4.antv.vision/manual/getting-started)。
|
||||
|
||||
## 开发
|
||||
|
||||
@ -134,10 +134,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## 文档
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6.antv.antgroup.com/api/graph' target='_blank'>API</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6-v4.antv.vision/api/graph' target='_blank'>API</a>
|
||||
|
||||
## G6 图可视化交流群
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
For more information of the usage, please refer to [Getting Started](https://g6.antv.antgroup.com/en/manual/getting-started).
|
||||
For more information of the usage, please refer to [Getting Started](https://g6-v4.antv.vision/en/manual/getting-started).
|
||||
|
||||
## Development
|
||||
|
||||
@ -134,10 +134,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## Documents
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/api/Graph' target='_blank'>API Reference</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/api/Graph' target='_blank'>API Reference</a>
|
||||
|
||||
## G6 Communication Group
|
||||
|
||||
@ -151,7 +151,6 @@ Welcome to join the **G6 Communication Group** or **G6 Communication Group-2** (
|
||||
|
||||
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.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT license](./LICENSE).
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"graph visualization",
|
||||
"relational data"
|
||||
],
|
||||
"homepage": "https://g6.antv.antgroup.com",
|
||||
"homepage": "https://g6-v4.antv.vision",
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/g6/issues"
|
||||
},
|
||||
|
||||
@ -108,7 +108,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
For more information of the usage, please refer to [Getting Started](https://g6.antv.antgroup.com/en/manual/getting-started).
|
||||
For more information of the usage, please refer to [Getting Started](https://g6-v4.antv.vision/en/manual/getting-started).
|
||||
|
||||
## Development
|
||||
|
||||
@ -135,10 +135,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## Documents
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/api/Graph' target='_blank'>API Reference</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/api/Graph' target='_blank'>API Reference</a>
|
||||
|
||||
## React project integration
|
||||
|
||||
|
||||
@ -110,7 +110,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6-v4.antv.vision/manual/getting-started)。
|
||||
|
||||
## 开发
|
||||
|
||||
@ -137,10 +137,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## 文档
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6.antv.antgroup.com/api/graph' target='_blank'>API</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6-v4.antv.vision/api/graph' target='_blank'>API</a>
|
||||
|
||||
## React 项目集成
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"graph visualization",
|
||||
"relational data"
|
||||
],
|
||||
"homepage": "https://g6.antv.antgroup.com",
|
||||
"homepage": "https://g6-v4.antv.vision",
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/g6/issues"
|
||||
},
|
||||
|
||||
@ -108,7 +108,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6.antv.antgroup.com/manual/getting-started)。
|
||||
更多关于 G6 使用的问题，请参考[快速上手](https://g6-v4.antv.vision/manual/getting-started)。
|
||||
|
||||
## 开发
|
||||
|
||||
@ -134,10 +134,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## 文档
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6.antv.antgroup.com/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6.antv.antgroup.com/api/Graph' target='_blank'>API</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/tutorial/preface' target='_blank'>入门教程</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/middle/overview' target='_blank'>核心概念</a>
|
||||
- <a href='https://g6-v4.antv.vision/manual/advanced/coordinate-system' target='_blank'>扩展阅读</a>
|
||||
- <a href='https://g6-v4.antv.vision/api/Graph' target='_blank'>API</a>
|
||||
|
||||
## G6 图可视化交流群
|
||||
|
||||
|
||||
@ -108,7 +108,7 @@ graph.render();
|
||||
|
||||
[](https://codesandbox.io/s/compassionate-lalande-5lxm7?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
For more information of the usage, please refer to [Getting Started](https://g6.antv.antgroup.com/en/manual/getting-started).
|
||||
For more information of the usage, please refer to [Getting Started](https://g6-v4.antv.vision/en/manual/getting-started).
|
||||
|
||||
## Development
|
||||
|
||||
@ -134,10 +134,10 @@ DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
|
||||
|
||||
## Documents
|
||||
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6.antv.antgroup.com/en/api/Graph' target='_blank'>API Reference</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/tutorial/preface' target='_blank'>Tutorial</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/middle/overview' target='_blank'>Middle Guides</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/manual/advanced/coordinate-system' target='_blank'>Further Reading</a>
|
||||
- <a href='https://g6-v4.antv.vision/en/api/Graph' target='_blank'>API Reference</a>
|
||||
|
||||
## G6 Communication Group
|
||||
|
||||
@ -151,7 +151,6 @@ Welcome to join the **G6 Communication Group** or **G6 Communication Group-2** (
|
||||
|
||||
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.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT license](./LICENSE).
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
"graph visualization",
|
||||
"relational data"
|
||||
],
|
||||
"homepage": "https://g6.antv.antgroup.com",
|
||||
"homepage": "https://g6-v4.antv.vision",
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/g6/issues"
|
||||
},
|
||||
|
||||
@ -50,7 +50,7 @@ export default defineConfig({
|
||||
description: 'A collection of charts made with the Grammar of Graphics',
|
||||
defaultLanguage: 'zh', // 默认语言
|
||||
isAntVSite: false, // 是否是 AntV 的大官网
|
||||
siteUrl: 'https://antv.antgroup.com', // 官网地址
|
||||
siteUrl: 'https://g6-v4.antv.vision', // 官网地址
|
||||
githubUrl: repository.url, // GitHub 地址
|
||||
footerTheme: 'light', // 白色 底部主题
|
||||
showSearch: true, // 是否显示搜索框
|
||||
@ -64,8 +64,8 @@ export default defineConfig({
|
||||
themeSwitcher: 'g2',
|
||||
versions: {
|
||||
// 历史版本以及切换下拉菜单
|
||||
[version]: 'https://g6.antv.antgroup.com',
|
||||
'5.x': 'https://g6-next.antv.antgroup.com',
|
||||
'5.x': 'https://g6.antv.antgroup.com/',
|
||||
[version]: 'https://g6-v4.antv.vision/',
|
||||
'3.2.x': 'https://g6-v3-2.antv.vision',
|
||||
},
|
||||
docsearchOptions: {
|
||||
@ -420,7 +420,10 @@ export default defineConfig({
|
||||
splitPaneMainSize: '62%',
|
||||
},
|
||||
playground: {
|
||||
extraLib: getExtraLib(),
|
||||
// extraLib: getExtraLib(),
|
||||
dependencies: {
|
||||
"@antv/g6": "^4.8.24"
|
||||
}
|
||||
},
|
||||
announcement: {
|
||||
zh: '',
|
||||
@ -448,10 +451,10 @@ export default defineConfig({
|
||||
buttons: [
|
||||
{
|
||||
text: {
|
||||
zh: 'V5 DEMO',
|
||||
en: 'V5 DEMO',
|
||||
zh: '最新版本',
|
||||
en: 'Latest Version',
|
||||
},
|
||||
link: `/g6v5`,
|
||||
link: `https://g6-v4.antv.vision/`,
|
||||
},
|
||||
{
|
||||
text: {
|
||||
@ -478,11 +481,11 @@ export default defineConfig({
|
||||
en: 'News',
|
||||
},
|
||||
title: {
|
||||
zh: 'G6 5.0-beta 闪亮登场',
|
||||
en: 'G6 5.0-beta is released!',
|
||||
zh: 'G6 5.0 正式版本发布',
|
||||
en: 'G6 5.0 is released!',
|
||||
},
|
||||
date: '2023.08.31',
|
||||
link: 'https://zhuanlan.zhihu.com/p/653709725?',
|
||||
date: '2024.06.06',
|
||||
link: 'https://g6-v4.antv.vision/',
|
||||
},
|
||||
{
|
||||
type: {
|
||||
@ -628,12 +631,12 @@ export default defineConfig({
|
||||
},
|
||||
],
|
||||
internalSite: {
|
||||
url: 'https://g6.antv.antgroup.com',
|
||||
url: 'https://g6-v4.antv.vision',
|
||||
name: {
|
||||
zh: '极速站点',
|
||||
en: 'Fast Site',
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
mfsu: false,
|
||||
analytics: {
|
||||
|
||||
@ -1 +1 @@
|
||||
g6.antv.vision
|
||||
g6-v4.antv.vision
|
||||
|
||||
@ -5,8 +5,8 @@ order: 14
|
||||
|
||||
There are several plugins in G6 which can be used for G6's graph or other applications.
|
||||
|
||||
- [Legend](#legend) *supported by v4.3.0 and later versions*
|
||||
- [SnapLine](#snapline) *supported by v4.3.0 and later versions*
|
||||
- [Legend](#legend) _supported by v4.3.0 and later versions_
|
||||
- [SnapLine](#snapline) _supported by v4.3.0 and later versions_
|
||||
- [Grid](#grid)
|
||||
- [Minimap](#minimap)
|
||||
- [Edge Bundling](#edge-bundling)
|
||||
@ -32,28 +32,27 @@ const graph = new G6.Graph({
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Legend
|
||||
|
||||
Legend is a built-in legend plugin for G6. It is useful for npde/edge type demonstration, and the end-users are able to interact with the legend to highlight and filter the items on the graph. *supported after v4.3.0*.
|
||||
Legend is a built-in legend plugin for G6. It is useful for npde/edge type demonstration, and the end-users are able to interact with the legend to highlight and filter the items on the graph. _supported after v4.3.0_.
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UmXzQLG65vYAAAAAAAAAAAAAARQnAQ' alt="img" width='500px'>
|
||||
|
||||
### Configuration
|
||||
|
||||
| Name | Type | Description |
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| data | GraphData | The data for the legend, not related to the data of the graph. The legend for nodes currently supports `'circle'`, `'rect'`, and `'ellipse'`. The legend for edges currently supports `'line'`, `'cubic'`, and `'quadratic'`. `type` for each data means the type of the legend item, and the `order` could be assigned to each node/edge data for ordering in a legend group |
|
||||
| position | 'top' / 'top-left' / 'top-right' / 'right' / 'right-top' / 'right-bottom' / 'left' / 'left-top' / 'left-bottom' / 'bottom' / 'bottom-left' / 'bottom-right' | The relative of the position to the canvas. `'top'` by default, which means the legend area is on the top of the canvas |
|
||||
| padding | number / number[] | The inner distance between the content of the legend to the border of the legend area. Array with four numbers means the padding to the top, right, bottom, and left responsively |
|
||||
| margin | number / number[] | The outer distance between the legend area to the border of the canvas. Array with four numbers means the distance to the top, right, bottom, and left responsively. Only the top distance takes effect when `position:'top'`, situations for other `position` configurations are similar to it |
|
||||
| margin | number / number[] | The outer distance between the legend area to the border of the canvas. Array with four numbers means the distance to the top, right, bottom, and left responsively. Only the top distance takes effect when `position:'top'`, situations for other `position` configurations are similar to it |
|
||||
| offsetX | number | The x-axis offset for the legend area, it is useful when you want to adjust the position of the lenged slightly |
|
||||
| offsetY | number | The y-axis offset for the legend area, it is useful when you want to adjust the position of the lenged slightly |
|
||||
| containerStyle | ShapeStyle | The style for the background rect, the format is similar as [rect shape style](/en/docs/api/shape-properties#rect) |
|
||||
| horiSep | number | The horizontal seperation of the legend items |
|
||||
| vertiSep | number | The vertical seperation of the legend items |
|
||||
| layout | 'vertical' / 'horizontal' | The layout of the legend items. `'horizontal'` by default |
|
||||
| align | 'center' / 'right' / 'left' | The alignment of the legend items. `'center'` by default |
|
||||
| align | 'center' / 'right' / 'left' | The alignment of the legend items. `'center'` by default |
|
||||
| title | string | The title string for the legend, the style of the title could be configured by `titleConfig` |
|
||||
| titleConfig | object | The style of the legend title, detail configurations are shown in following lines |
|
||||
| titleConfig.position | 'center' / 'right' / 'left' | The alignment of the title to the legend content. `'center'` by default |
|
||||
@ -64,18 +63,18 @@ Legend is a built-in legend plugin for G6. It is useful for npde/edge type demon
|
||||
| filter.enable | boolean | Whether allow filtering the items in the main graph while the end-user interaction with the legend items. `false` by default |
|
||||
| filter.multiple | boolean | Whether support active multiple types of legend items, `false` by default, which means only one type of legend item will be activated in the same time. If it is `true`, multiple items could be activated only when the `filter.trigger` is `'click'` |
|
||||
| filter.trigger | 'click' / 'mouseenter' | The interaction way to the legend items. `click` by default, which means while the end-user clicking a legend item, the legend item and corresponding filtered items on the main graph will be activated |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | The state styles for the legend items while filtering, inluding `filter.legendStateStyles.active` and `filter.legendStateStyles.inactive`. The type of each one is `ShapeStyle`. Similar to the `nodeStateStyles` of Graph |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | The state styles for the legend items while filtering, inluding `filter.legendStateStyles.active` and `filter.legendStateStyles.inactive`. The type of each one is `ShapeStyle`. Similar to the `nodeStateStyles` of Graph |
|
||||
| filter.graphActiveState | string | The activate state name for the items on the main graph. When a lenged item is activated, the corresponding items of the main graph will be set to `filter.graphActiveState`, `'active'` by default. And you should assign the state style for this state name on Graph |
|
||||
| filter.graphInactiveState | string | The inactivate state name for the items on the main graph. When a lenged item is inactivated, the corresponding items of the main graph will be set to `filter.graphInactiveState`, `'inactive'` by default. And you should assign the state style for this state name on Graph |
|
||||
| filter.filterFunctions | { [key: string]: (d) => boolean; } | Since the data of the legend is not related to the main graph, you should configure filtering functions for each legend item type. The `key` is corresponding to the `type` of the legend item, and the value is a function. For the function, the parameter is the item data of the main graph, and the return value is a boolean which means whether the item of the main graph should be activated |
|
||||
|
||||
## SnapLine
|
||||
|
||||
SnapLine is a built-in components in G6. *supported by v4.3.0 and later versions*.
|
||||
SnapLine is a built-in components in G6. _supported by v4.3.0 and later versions_.
|
||||
|
||||
### Configuration
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| Name | Type | Required | Description |
|
||||
| ------------- | --------------------------------------------- | -------- | --------------------- |
|
||||
| line | ShapeStyle | false | the style of SnapLine |
|
||||
| itemAlignType | boolean、'horizontal' 、'vertical'、'center'; | false | the type of SnapLine |
|
||||
@ -227,7 +226,7 @@ Menu is used to configure the right-click menu on the node.
|
||||
| offsetX | number | 6 | The x offset of the menu to the parent container |
|
||||
| offsetY | number | 6 | The y offset of the menu to the parent container |
|
||||
| itemTypes | string[] | ['node', 'edge', 'combo'] | which types of items the menu takes effect on. E.g. if you want the menu shows up only on node, assign `itemTypes` with ['node'] |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | the trigger for the menu, `'contextmenu'` by default, which means the menu will show up when the end user right click on some item. `'click'` means left click. *'click' is supported by v4.3.2 and later versions* |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | the trigger for the menu, `'contextmenu'` by default, which means the menu will show up when the end user right click on some item. `'click'` means left click. _'click' is supported by v4.3.2 and later versions_ |
|
||||
|
||||
### Usage
|
||||
|
||||
@ -255,11 +254,11 @@ const menu = new G6.Menu({
|
||||
<li>menu01</li>
|
||||
<li>menu01</li>
|
||||
<li>menu01</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleMenuClick(target, item) {
|
||||
console.log(target, item)
|
||||
console.log(target, item);
|
||||
},
|
||||
});
|
||||
|
||||
@ -283,7 +282,7 @@ const menu = new G6.Menu({
|
||||
</ul>`;
|
||||
},
|
||||
handleMenuClick(target, item) {
|
||||
console.log(target, item)
|
||||
console.log(target, item);
|
||||
},
|
||||
});
|
||||
|
||||
@ -344,7 +343,7 @@ const toolbar = new G6.ToolBar({
|
||||
<li code='add'>Add Node</li>
|
||||
<li code='undo'>Undo</li>
|
||||
</ul>
|
||||
`
|
||||
`;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
if (code === 'add') {
|
||||
@ -352,17 +351,17 @@ const toolbar = new G6.ToolBar({
|
||||
id: 'node2',
|
||||
label: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
})
|
||||
y: 150,
|
||||
});
|
||||
} else if (code === 'undo') {
|
||||
// redefine undo operator
|
||||
toolbar.undo()
|
||||
toolbar.autoZoom()
|
||||
toolbar.undo();
|
||||
toolbar.autoZoom();
|
||||
} else {
|
||||
// Other operations remain default
|
||||
toolbar.handleDefaultOperator(code)
|
||||
toolbar.handleDefaultOperator(code);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -384,12 +383,10 @@ const toolbar = new G6.ToolBar({
|
||||
<li>example 03</li>
|
||||
<li>example 04</li>
|
||||
<li>example 05</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
|
||||
}
|
||||
handleClick: (code, graph) => {},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -397,6 +394,7 @@ const graph = new G6.Graph({
|
||||
plugins: [toolbar], // Use the ToolBar plugin
|
||||
});
|
||||
```
|
||||
|
||||
## ToolTip
|
||||
|
||||
ToolTip helps user to explore detail infomations on the node and edge. Do note that, This Tooltip Plugins will replace the tooltip in the built-in behavior after G6 4.0.
|
||||
@ -432,10 +430,10 @@ const tooltip = new G6.Tooltip({
|
||||
<h4>Custom Tooltip</h4>
|
||||
<ul>
|
||||
<li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
itemTypes: ['node']
|
||||
itemTypes: ['node'],
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -466,12 +464,13 @@ const graph = new G6.Graph({
|
||||
plugins: [tooltip], // Use Tooltip plugin
|
||||
});
|
||||
```
|
||||
|
||||
### Event Listener
|
||||
|
||||
TimeBar Plugin exposes several timing events. They could be listened by `graph.on('eventname', e => {})`.
|
||||
|
||||
| Event Name | Description |
|
||||
| --- | --- |
|
||||
| Event Name | Description |
|
||||
| ------------- | ------------------------------------ |
|
||||
| tooltipchange | Emitted when the Tooltip is changed. |
|
||||
|
||||
## Fisheye Lens
|
||||
@ -523,7 +522,7 @@ const fisheye = new G6.Fisheye({
|
||||
d: 1.5,
|
||||
r: 300,
|
||||
delegateStyle: clone(lensDelegateStyle),
|
||||
showLabel: false
|
||||
showLabel: false,
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -575,9 +574,9 @@ filterLens.updateParams({
|
||||
const filterLens = new G6.EdgeFilterLens({
|
||||
trigger: 'mousemove',
|
||||
r: 300,
|
||||
shouldShow: d => {
|
||||
shouldShow: (d) => {
|
||||
return d.size > 10;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -605,7 +604,7 @@ All the three types of timebar supports play, fast forward, and fast backward.
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kHRkQpnvBmwAAAAAAAAAAAAAARQnAQ' width='500' />
|
||||
<br />Time bar with descrete ticks<br />
|
||||
|
||||
<br />Refer to the demos [HERE](https://g6.antv.antgroup.com/en/examples/tool/timebar#timebar)<br />
|
||||
<br />Refer to the demos [HERE](https://g6-v4.antv.vision/en/examples/tool/timebar#timebar)<br />
|
||||
|
||||
### Common Usage
|
||||
|
||||
@ -651,14 +650,14 @@ const timebar = new G6.TimeBar({
|
||||
data: timeBarData,
|
||||
width,
|
||||
height: 42,
|
||||
tickLabelFormatter: d => {
|
||||
tickLabelFormatter: (d) => {
|
||||
const dateStr = `${d.date}`;
|
||||
if ((count - 1) % 10 === 0) {
|
||||
return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
tooltipFomatter: d => {
|
||||
tooltipFomatter: (d) => {
|
||||
const dateStr = `${d}`;
|
||||
return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
|
||||
},
|
||||
@ -668,16 +667,15 @@ const timebar = new G6.TimeBar({
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*n6ECQ7Jn5pQAAAAAAAAAAAAAARQnAQ' width='600' />
|
||||
|
||||
|
||||
### Event Listener
|
||||
|
||||
TimeBar Plugin exposes several timing events. They could be listened by `graph.on('eventname', e => {})`.
|
||||
|
||||
| Event Name | Description |
|
||||
| --- | --- |
|
||||
| valuechange | Emitted when the value range of the timebar is chaged. |
|
||||
| timebarstartplay | Emitted when the timeline starts to play. |
|
||||
| timebarendplay | Emitted when the timeline ends playing. |
|
||||
| Event Name | Description |
|
||||
| ---------------- | ------------------------------------------------------ |
|
||||
| valuechange | Emitted when the value range of the timebar is chaged. |
|
||||
| timebarstartplay | Emitted when the timeline starts to play. |
|
||||
| timebarendplay | Emitted when the timeline ends playing. |
|
||||
|
||||
### API
|
||||
|
||||
@ -745,7 +743,7 @@ interface TimeBarConfig extends IPluginBaseConfig {
|
||||
#### The Parameters of the Interfaces
|
||||
|
||||
| Name | Type | Default Value | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| container | HTMLDivElement | null | The DOM container of the TimeBar. By default, the plugin will create a container DOM with 'g6-component-timebar' as className |
|
||||
| x | number | 0 | The beginning x position of the TimeBar plugin |
|
||||
| y | number | 0 | The beginning y position of the TimeBar plugin |
|
||||
@ -794,7 +792,7 @@ interface TrendConfig {
|
||||
#### Parameters of the TrendConfig
|
||||
|
||||
| Name | Type | Default Value | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| x | number | 0 | The beginning x position of the trend line chart |
|
||||
| y | number | 0 | The beginning y position of the trend line chart |
|
||||
| width | number | The width of the TimeBar | The width of the trend line chart of the TimeBar, we suggest to use the default value. If you wanna custom it, please assign the `width` of the slider in the same time |
|
||||
@ -803,7 +801,7 @@ interface TrendConfig {
|
||||
| isArea | boolean | false | Whether to show a area chart instead |
|
||||
| lineStyle | ShapeStyle | null | The configurations for the style of the line in the line chart |
|
||||
| areaStyle | ShapeStyle | null | The configuration for the style of the area in the chart when `isArea` is `true` |
|
||||
| interval | Interval | null | The configuration for the style of the bars in the chart. When it is assigned, a mixed trend chart will take place. `Interval = { data: number[], style: ShapeStyle }`. Except the configurations in `ShapeStyle` for the style of the shapes in the bar charts, `barWidth` for the width of one bar is also configurable for `style` |
|
||||
| interval | Interval | null | The configuration for the style of the bars in the chart. When it is assigned, a mixed trend chart will take place. `Interval = { data: number[], style: ShapeStyle }`. Except the configurations in `ShapeStyle` for the style of the shapes in the bar charts, `barWidth` for the width of one bar is also configurable for `style` |
|
||||
|
||||
#### Interfaces of SliderOption
|
||||
|
||||
|
||||
@ -5,8 +5,8 @@ order: 14
|
||||
|
||||
G6 提供了一些可插拔的组件，包括：
|
||||
|
||||
- [Legend](#legend) *v4.3.0 起支持*
|
||||
- [SnapLine](#snapline) *v4.3.0 起支持*
|
||||
- [Legend](#legend) _v4.3.0 起支持_
|
||||
- [SnapLine](#snapline) _v4.3.0 起支持_
|
||||
- [Grid](#grid)
|
||||
- [Minimap](#minimap)
|
||||
- [ImageMinimap](#image-minimap)
|
||||
@ -34,7 +34,7 @@ const graph = new G6.Graph({
|
||||
|
||||
## Legend
|
||||
|
||||
Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和边所代表的含义，并可以通过与图例的交互做简单的高亮和过滤。 *v4.3.0 起支持*。
|
||||
Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和边所代表的含义，并可以通过与图例的交互做简单的高亮和过滤。 _v4.3.0 起支持_。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UmXzQLG65vYAAAAAAAAAAAAAARQnAQ' alt="img" width='500px'>
|
||||
|
||||
@ -63,25 +63,24 @@ Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和
|
||||
| filter.enable | boolean | 是否允许通过图例的交互对主图元素过滤，默认为 `false` |
|
||||
| filter.multiple | boolean | 是否支持多种元素过滤，默认为 `false`。当它为 `true` 时，只有 `filter.trigger` 为 `'click'` 时方可多选图例 |
|
||||
| filter.trigger | 'click' / 'mouseenter' | 触发主图元素过滤的图例交互方式，默认为 `click` |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | 在过滤时，图例本身的状态样式，包括 `filter.legendStateStyles.active` 和 `filter.legendStateStyles.inactive` 两种，每种的类型均为 ShapeStyle。类似图的 `nodeStateStyles` 配置 |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | 在过滤时，图例本身的状态样式，包括 `filter.legendStateStyles.active` 和 `filter.legendStateStyles.inactive` 两种，每种的类型均为 ShapeStyle。类似图的 `nodeStateStyles` 配置 |
|
||||
| filter.graphActiveState | string | 主图元素过滤时，被选中的主图元素的状态名，将寻找主图元素的对应的状态样式进行主图元素的更新。默认值为 `'active'` |
|
||||
| filter.graphInactiveState | string | 主图元素过滤时，未被选中的主图元素的状态名，将寻找主图元素的对应的状态样式进行主图元素的更新。默认值为 `'inactive'` |
|
||||
| filter.filterFunctions | { [key: string]: (d) => boolean; } | 由于图例的数据与主图解耦，因此需要配置每种图例对应的主图过滤函数，`key` 为图例数据的 `type`，值为函数，函数的参数为主图元素的数据，返回值为布尔型，代表是否被选中 |
|
||||
|
||||
## SnapLine
|
||||
|
||||
SnapLine 是 G6 内置的对齐线插件。 *v4.3.0 起支持*。
|
||||
SnapLine 是 G6 内置的对齐线插件。 _v4.3.0 起支持_。
|
||||
|
||||
实例化时可以通过配置项调整 SnapLine 的样式和功能。
|
||||
|
||||
### 配置项
|
||||
|
||||
| 名称 | 类型 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| line | ShapeStyle | 辅助线的样式 |
|
||||
| 名称 | 类型 | 描述 |
|
||||
| ------------- | --------------------------------------------- | ------------------------- |
|
||||
| line | ShapeStyle | 辅助线的样式 |
|
||||
| itemAlignType | boolean、'horizontal' 、'vertical'、'center'; | 辅助线类型，true 表示全部 |
|
||||
|
||||
|
||||
## Grid
|
||||
|
||||
Grid 插件在画布上绘制了网格。
|
||||
@ -107,7 +106,7 @@ Minimap 是用于快速预览和探索图的工具。
|
||||
### 配置项
|
||||
|
||||
| 名称 | 类型 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| container | Object | 放置 Minimap 的 DOM 容器。若不指定则自动生成 |
|
||||
| className | String | 生成的 DOM 元素的 className |
|
||||
| viewportClassName | String | Minimap 上视窗 DOM 元素的 className |
|
||||
@ -116,7 +115,6 @@ Minimap 是用于快速预览和探索图的工具。
|
||||
| delegateStyle | Object | 在 `type` 为 `'delegate'` 时生效，代表元素大致图形的样式 |
|
||||
| hideEdge | Boolean | false | **v4.7.16 起支持** 控制 Minimap 上边的显示与隐藏，设置为 `true` 可在大规模图上大幅提升性能 |
|
||||
|
||||
|
||||
其中，delegateStyle 可以设置如下属性：
|
||||
|
||||
| 名称 | 类型 | 描述 |
|
||||
@ -230,7 +228,7 @@ Menu 用于配置节点上的右键菜单。
|
||||
| offsetX | number | 6 | menu 的 x 方向偏移值，需要考虑父级容器的 padding |
|
||||
| offsetY | number | 6 | menu 的 y 方向偏移值，需要考虑父级容器的 padding |
|
||||
| itemTypes | string[] | ['node', 'edge', 'combo'] | menu 作用在哪些类型的元素上，若只想在节点上显示，可将其设置为 ['node'] |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | menu 出现的触发方式，默认为 `'contextmenu'`，即右击。`'click'` 代表左击。*v4.3.2 起支持 'click'* |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | menu 出现的触发方式，默认为 `'contextmenu'`，即右击。`'click'` 代表左击。_v4.3.2 起支持 'click'_ |
|
||||
|
||||
### 用法
|
||||
|
||||
@ -261,11 +259,11 @@ const menu = new G6.Menu({
|
||||
<li>测试01</li>
|
||||
<li>测试01</li>
|
||||
<li>测试01</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleMenuClick(target, item) {
|
||||
console.log(target, item)
|
||||
console.log(target, item);
|
||||
},
|
||||
});
|
||||
|
||||
@ -289,7 +287,7 @@ const menu = new G6.Menu({
|
||||
</ul>`;
|
||||
},
|
||||
handleMenuClick(target, item) {
|
||||
console.log(target, item)
|
||||
console.log(target, item);
|
||||
},
|
||||
});
|
||||
|
||||
@ -313,7 +311,7 @@ ToolBar 集成了以下常见的操作：
|
||||
### 配置项
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| container | HTMLDivElement | null | ToolBar 容器，如果不设置，则默认使用 canvas 的 DOM 容器 |
|
||||
| className | string | null | ToolBar 内容元素的 class 类名 |
|
||||
| getContent | (graph?: IGraph) => HTMLDivElement | string | <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7QSRRJwAWxQAAAAAAAAAAABkARQnAQ' width=80 alt='img'/> | ToolBar 内容，支持 DOM 元素或字符串 |
|
||||
@ -350,7 +348,7 @@ const toolbar = new G6.ToolBar({
|
||||
<li code='add'>增加节点</li>
|
||||
<li code='undo'>撤销</li>
|
||||
</ul>
|
||||
`
|
||||
`;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
if (code === 'add') {
|
||||
@ -358,17 +356,17 @@ const toolbar = new G6.ToolBar({
|
||||
id: 'node2',
|
||||
label: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
})
|
||||
y: 150,
|
||||
});
|
||||
} else if (code === 'undo') {
|
||||
// 自定义 undo
|
||||
toolbar.undo()
|
||||
toolbar.autoZoom()
|
||||
toolbar.undo();
|
||||
toolbar.autoZoom();
|
||||
} else {
|
||||
// 其他操作保持默认不变
|
||||
toolbar.handleDefaultOperator(code)
|
||||
toolbar.handleDefaultOperator(code);
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -390,12 +388,10 @@ const toolbar = new G6.ToolBar({
|
||||
<li>测试03</li>
|
||||
<li>测试04</li>
|
||||
<li>测试05</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
|
||||
}
|
||||
handleClick: (code, graph) => {},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -439,10 +435,10 @@ const tooltip = new G6.Tooltip({
|
||||
<h4>自定义tooltip</h4>
|
||||
<ul>
|
||||
<li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
itemTypes: ['node']
|
||||
itemTypes: ['node'],
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -478,8 +474,8 @@ const graph = new G6.Graph({
|
||||
|
||||
Tooltip 插件暴露除了几个时机事件，方便用户监听内部状态的变化。以下事件可通过 `graph.on('eventname', e => {})` 进行监听。
|
||||
|
||||
| 事件名称 | 描述 |
|
||||
| --- | --- |
|
||||
| 事件名称 | 描述 |
|
||||
| ------------- | ---------------------- |
|
||||
| tooltipchange | Tooltip 发生变化时触发 |
|
||||
|
||||
## Fisheye
|
||||
@ -489,7 +485,7 @@ Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的，它能够
|
||||
### 配置项
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| trigger | 'mousemove' / 'click' / 'drag' | 'mousemove' | 放大镜的触发事件 |
|
||||
| d | Number | 1.5 | 放大系数，数值越大，放大程度越大 |
|
||||
| r | Number | 300 | 放大区域的范围半径 |
|
||||
@ -531,7 +527,7 @@ const fisheye = new G6.Fisheye({
|
||||
d: 1.5,
|
||||
r: 300,
|
||||
delegateStyle: clone(lensDelegateStyle),
|
||||
showLabel: false
|
||||
showLabel: false,
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -583,9 +579,9 @@ filterLens.updateParams({
|
||||
const filterLens = new G6.EdgeFilterLens({
|
||||
trigger: 'mousemove',
|
||||
r: 300,
|
||||
shouldShow: d => {
|
||||
shouldShow: (d) => {
|
||||
return d.size > 10;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -617,7 +613,7 @@ const graph = new G6.Graph({
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*17VoSoTm9o8AAAAAAAAAAAAAARQnAQ' width='500' />
|
||||
|
||||
<br />虽然 G6 提供了各种不同类型的 TimeBar 组件，但在使用的方式却非常简单，通过配置字段就可以进行区分。<br /> <br />关于 TimeBar 的使用案例，请参考[这里](https://g6.antv.antgroup.com/examples/tool/timebar#timebar)。<br />
|
||||
<br />虽然 G6 提供了各种不同类型的 TimeBar 组件，但在使用的方式却非常简单，通过配置字段就可以进行区分。<br /> <br />关于 TimeBar 的使用案例，请参考[这里](https://g6-v4.antv.vision/examples/tool/timebar#timebar)。<br />
|
||||
|
||||
### 使用 TimeBar 组件
|
||||
|
||||
@ -684,11 +680,11 @@ const timebar = new G6.TimeBar({
|
||||
|
||||
TimeBar 插件暴露除了几个时机事件，方便用户监听内部状态的变化。以下事件可通过 `graph.on('eventname', e => {})` 进行监听。
|
||||
|
||||
| 事件名称 | 描述 |
|
||||
| --- | --- |
|
||||
| valuechange | 时间轴的时间范围发生变化时触发 |
|
||||
| timebarstartplay | 时间轴开始播放时触发 |
|
||||
| timebarendplay | 时间轴播放结束时触发 |
|
||||
| 事件名称 | 描述 |
|
||||
| ---------------- | ------------------------------ |
|
||||
| valuechange | 时间轴的时间范围发生变化时触发 |
|
||||
| timebarstartplay | 时间轴开始播放时触发 |
|
||||
| timebarendplay | 时间轴播放结束时触发 |
|
||||
|
||||
### API
|
||||
|
||||
@ -755,7 +751,7 @@ interface TimeBarConfig extends IPluginBaseConfig {
|
||||
#### 接口参数说明
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| container | HTMLDivElement | null | TimeBar 容器，如果不设置，则默认创建 className 为 g6-component-timebar 的 DOM 容器 |
|
||||
| x | number | 0 | TimeBar 开始 x 坐标 |
|
||||
| y | number | 0 | TimeBar 开始 y 坐标 |
|
||||
@ -904,7 +900,6 @@ export interface TimeBarSliceOption {
|
||||
| tickLabelFormatter | Function | null | 刻度的格式化回调函数 |
|
||||
| tooltipFomatter | Function | null | tooltip 上内容格式化的回调函数 |
|
||||
|
||||
|
||||
#### TickCfg 接口定义
|
||||
|
||||
```javascript
|
||||
|
||||
@ -25,7 +25,7 @@ Change the scale of the graph with a relative ratio.
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| Name | Type | Required | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| ratio | Number | true | Relative zoom ratio |
|
||||
| center | Object | false | The zoom center. If it is not assigned, (0, 0) will be regarded as the zoom center |
|
||||
@ -38,7 +38,7 @@ Change the scale of the graph with a relative ratio.
|
||||
// zoom to scale 3 at the center (100, 100)
|
||||
graph.zoom(3, { x: 100, y: 100 });
|
||||
|
||||
// zoom to scale 0.5 at the origin (0, 0) of canvas drawing coordinate system, which is not the same as the lefttop of the viewport. To see the transformantion and relationships between three coordinate systems in G6, checkout out the doc: https://g6.antv.antgroup.com/en/manual/advanced/coordinate-system
|
||||
// zoom to scale 0.5 at the origin (0, 0) of canvas drawing coordinate system, which is not the same as the lefttop of the viewport. To see the transformantion and relationships between three coordinate systems in G6, checkout out the doc: https://g6-v4.antv.vision/en/manual/advanced/coordinate-system
|
||||
graph.zoom(0.5);
|
||||
|
||||
// zoom to scale 3 at the center (100, 100) with animation
|
||||
@ -53,7 +53,7 @@ Scale the graph to a target ratio.
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| Name | Type | Required | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| toRatio | Number | true | The target ratio |
|
||||
| center | Object | false | The zoom center. If it is not assigned, (0, 0) will be regarded as the zoom center |
|
||||
@ -75,7 +75,6 @@ graph.zoomTo(3, { x: 100, y: 100 }, true, {
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### graph.changeSize(width, height)
|
||||
|
||||
Change the size of the canvas.
|
||||
@ -99,10 +98,10 @@ Move the canvas with **relative displacement**.
|
||||
|
||||
**Parameters**
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| ---- | ------ | -------- | ----------------------------------------- |
|
||||
| dx | Number | true | Displacement in the horizontal direction. |
|
||||
| dy | Number | true | Displacement in the vertical direction. |
|
||||
| Name | Type | Required | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| dx | Number | true | Displacement in the horizontal direction. |
|
||||
| dy | Number | true | Displacement in the vertical direction. |
|
||||
| animate | boolean | false | Whether translate the graph with animation. |
|
||||
| animateCfg | Object | false | The animation's configuraiton. Its configurations can be found in [Basic Animation Docs](/en/docs/manual/middle/animation). If it is not assigned, animates following the graph's `animateCfg`. |
|
||||
|
||||
|
||||
@ -31,8 +31,8 @@ const zoom = graph.getZoom();
|
||||
| --- | --- | --- | --- |
|
||||
| ratio | Number | true | 缩放比例 |
|
||||
| center | Object | false | 以 `center` 的 `x`、`y` 坐标为中心缩放，如果省略了 `center` 参数，则以元素当前位置为中心缩放 |
|
||||
| animate | Boolean | false | 是否开启动画 |
|
||||
| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 |
|
||||
| animate | Boolean | false | 是否开启动画 |
|
||||
| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 |
|
||||
|
||||
**用法**
|
||||
|
||||
@ -40,7 +40,7 @@ const zoom = graph.getZoom();
|
||||
// 以 (100, 100) 为中心点，放大到 3
|
||||
graph.zoom(3, { x: 100, y: 100 });
|
||||
|
||||
// 以绘制坐标系的原点 (0, 0) 为缩放中心，缩小到 0.5。注意绘制坐标系的原点 != 视窗左上角，可用 graph.getCanvasByViewport 进行转换。各坐标系解析文档： https://g6.antv.antgroup.com/manual/advanced/coordinate-system
|
||||
// 以绘制坐标系的原点 (0, 0) 为缩放中心，缩小到 0.5。注意绘制坐标系的原点 != 视窗左上角，可用 graph.getCanvasByViewport 进行转换。各坐标系解析文档： https://g6-v4.antv.vision/manual/advanced/coordinate-system
|
||||
graph.zoom(0.5);
|
||||
|
||||
// 带动画以 (100, 100) 为中心点，放大到 3
|
||||
@ -59,8 +59,8 @@ graph.zoom(3, { x: 100, y: 100 }, true, {
|
||||
| --- | --- | --- | --- |
|
||||
| toRatio | Number | true | 固定比例值 |
|
||||
| center | Object | false | 以 `center` 的 `x`、`y` 坐标为中心缩放，如果省略了 `center` 参数，则以元素当前位置为中心缩放 |
|
||||
| animate | Boolean | false | 是否开启动画 |
|
||||
| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 |
|
||||
| animate | Boolean | false | 是否开启动画 |
|
||||
| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 |
|
||||
|
||||
**用法**
|
||||
|
||||
@ -100,12 +100,12 @@ graph.changeSize(600, 350);
|
||||
|
||||
**参数**
|
||||
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| ---- | ------ | -------- | ------------ |
|
||||
| dx | Number | true | 水平方向位移 |
|
||||
| dy | Number | true | 垂直方向位移 |
|
||||
| animate | Boolean | false | 是否开启动画 |
|
||||
| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 |
|
||||
| 名称 | 类型 | 是否必选 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| dx | Number | true | 水平方向位移 |
|
||||
| dy | Number | true | 垂直方向位移 |
|
||||
| animate | Boolean | false | 是否开启动画 |
|
||||
| animateCfg | GraphAnimateConfig | false | 若带有动画，可配置动画，参见[基础动画教程](/zh/docs/manual/middle/animation)。若未配置，则跟随 graph 的 `animateCfg` 参数 |
|
||||
|
||||
**用法**
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ order: 1
|
||||
|
||||
### 趋势图时间轴
|
||||
|
||||
该时间轴包括但不限于折线图、面积图、柱状图中的一种或多种组合用来表示某种数据属性趋势的时间轴组件，[查看演示 Demo](https://g6.antv.antgroup.com/examples/tool/timebar#timebar)。
|
||||
该时间轴包括但不限于折线图、面积图、柱状图中的一种或多种组合用来表示某种数据属性趋势的时间轴组件，[查看演示 Demo](https://g6-v4.antv.vision/examples/tool/timebar#timebar)。
|
||||
|
||||
<br/>
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*bET1QI0dleEAAAAAAAAAAAAAARQnAQ' width='95%' alt=‘img’>
|
||||
@ -28,14 +28,14 @@ order: 1
|
||||
|
||||
### 简版时间轴
|
||||
|
||||
相对于趋势图时间轴而言，去掉了表示数据趋势的图表，使用更为简洁的线条来表示时间范围，[查看演示 Demo](https://g6.antv.antgroup.com/examples/tool/timebar#simple-timebar)。
|
||||
相对于趋势图时间轴而言，去掉了表示数据趋势的图表，使用更为简洁的线条来表示时间范围，[查看演示 Demo](https://g6-v4.antv.vision/examples/tool/timebar#simple-timebar)。
|
||||
|
||||
<br/>
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*yTC2RKh3-U8AAAAAAAAAAAAAARQnAQ' width='95%' alt=‘img’>
|
||||
|
||||
### 时间刻度时间轴
|
||||
|
||||
指表示时间刻度的时间轴组件，[查看演示 Demo](https://g6.antv.antgroup.com/examples/tool/timebar#slice-timebar)。
|
||||
指表示时间刻度的时间轴组件，[查看演示 Demo](https://g6-v4.antv.vision/examples/tool/timebar#slice-timebar)。
|
||||
|
||||
<br/>
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*-hESSqWf8h4AAAAAAAAAAAAAARQnAQ' width='95%' alt=‘img’>
|
||||
|
||||
@ -27,7 +27,7 @@ In Alibaba and Ant Group, graph analysis is widely used in different scenarios s
|
||||
|
||||
### 1.2 Types of Graph
|
||||
|
||||
Nowadays, there is no unified graph classificationin both the industry and the academia. Based on AntV's business, we have summarized several common types of graphs: common network, flow chart, DAG diagram, architecture diagram, ER diagram, tree graph. Each graph type has specific usage scenarios and key points for designing. We provide a detailed introduction from the basic introduction, characteristics, applicable business scenarios, and design guidelines for graphs. <br/> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eAFrS5-H_IgAAAAAAAAAAAAAARQnAQ' width='90%' alt='img' /> <br/> [Intro and Guidelines for Different Graph Type >](https://g6.antv.antgroup.com/en/design/template) <br/>
|
||||
Nowadays, there is no unified graph classificationin both the industry and the academia. Based on AntV's business, we have summarized several common types of graphs: common network, flow chart, DAG diagram, architecture diagram, ER diagram, tree graph. Each graph type has specific usage scenarios and key points for designing. We provide a detailed introduction from the basic introduction, characteristics, applicable business scenarios, and design guidelines for graphs. <br/> <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*eAFrS5-H_IgAAAAAAAAAAAAAARQnAQ' width='90%' alt='img' /> <br/> [Intro and Guidelines for Different Graph Type >](https://g6-v4.antv.vision/en/design/template) <br/>
|
||||
|
||||
## 2. Objects to be Designed
|
||||
|
||||
@ -91,13 +91,13 @@ The styles of nodes and edges are the basic design for graph visualization. To f
|
||||
<br/>
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EtfPTrmY5joAAAAAAAAAAAAAARQnAQ' width='90%' alt='img' />
|
||||
<br/>
|
||||
[The Buit-in Components of AntV >](https://g6.antv.antgroup.com/en/design/component/component-overview)
|
||||
[The Buit-in Components of AntV >](https://g6-v4.antv.vision/en/design/component/component-overview)
|
||||
<br/>
|
||||
|
||||
In some special scenarios, it is also necessary to upgrade and optimize basic components based on the actual business requirements, or even design new components based on the unique capabilities of the product. When optimizing a basic component or designing a brand-new component, it is necessary to combine the actual functional requirements and get a full picture of several perspectives such as usage scenarios, constituent elements, common types, and interactive instructions. Take the two newly designed components of AntV as examples:
|
||||
|
||||
- [TimeBar](https://g6.antv.antgroup.com/en/design/component/timebar)
|
||||
- [View Control ToolBar](https://g6.antv.antgroup.com/en/design/component/view-toolbar)
|
||||
- [TimeBar](https://g6-v4.antv.vision/en/design/component/timebar)
|
||||
- [View Control ToolBar](https://g6-v4.antv.vision/en/design/component/view-toolbar)
|
||||
|
||||
### 2.4 Intereaction Design
|
||||
|
||||
@ -116,7 +116,7 @@ According to whether the interaction event is a global common behavior, the inte
|
||||
|
||||
### 2.5 Visual Design
|
||||
|
||||
> Corresponds to the performance layer in the "five layers" <br/> Aside from the product interface, the visual design of the graph is essentially a process of establishing mapping channels between visual attributes and data characteristics to form a specific semantic association. A good visual design can greatly improve the information transmission efficiency of the graph. The main items of a graph are nodes and edges. On a node or an edge, there might be text labels and other auxiliary shapes. Consider to the visual design of the graph, the elements should to be disassembled and designed separately, and different interaction events and data attributes should be considered globally. Data properties should be mapped to corresponding visual attributes. In the same time, and final effect of integated visual attributes is also important. Common visual attributes in design are: shape, color, size, direction, material, brightness, position, etc. The design for most basic attributes: shape and color, will be introduced in detail. <br/> [The Visual Design Guidelines >](https://g6.antv.antgroup.com/en/design/global/style) <br/>
|
||||
> Corresponds to the performance layer in the "five layers" <br/> Aside from the product interface, the visual design of the graph is essentially a process of establishing mapping channels between visual attributes and data characteristics to form a specific semantic association. A good visual design can greatly improve the information transmission efficiency of the graph. The main items of a graph are nodes and edges. On a node or an edge, there might be text labels and other auxiliary shapes. Consider to the visual design of the graph, the elements should to be disassembled and designed separately, and different interaction events and data attributes should be considered globally. Data properties should be mapped to corresponding visual attributes. In the same time, and final effect of integated visual attributes is also important. Common visual attributes in design are: shape, color, size, direction, material, brightness, position, etc. The design for most basic attributes: shape and color, will be introduced in detail. <br/> [The Visual Design Guidelines >](https://g6-v4.antv.vision/en/design/global/style) <br/>
|
||||
|
||||
#### 2.5.1 Shape
|
||||
|
||||
|
||||
@ -9,13 +9,12 @@ Performance problem is significant on graph visualization apps since graph usual
|
||||
|
||||
### Performance Bottleneck - Rendering
|
||||
|
||||
On the aspect of rendering, the performance is mainly affected by the total number of shapes on the canvas. e.g. there is a rect, a text, and an image shape on a node, and a path, a text shape on a edge. Then, a graph with 100 nodes and 50 edges will have 100 * 3 + 50 * 2 = 400 shapes in total. However, the number of shapes on a custom node usually reaches 10-20, which means the total number on the canvas will be large. So we suggest to reduce the shapes on custom items to improve the rendering performance.
|
||||
On the aspect of rendering, the performance is mainly affected by the total number of shapes on the canvas. e.g. there is a rect, a text, and an image shape on a node, and a path, a text shape on a edge. Then, a graph with 100 nodes and 50 edges will have 100 _ 3 + 50 _ 2 = 400 shapes in total. However, the number of shapes on a custom node usually reaches 10-20, which means the total number on the canvas will be large. So we suggest to reduce the shapes on custom items to improve the rendering performance.
|
||||
|
||||
### Performance Bottleneck - Computation
|
||||
|
||||
Computation on a graph mainly includes layout calculation, polyline path finding calculation, etc.
|
||||
|
||||
|
||||
## Tips
|
||||
|
||||
We are trying to keep on improving the built-in codes in G6 to reach better performance. And on the aspect of apps based on G6, the implement ways are significant to the upper level performance. Impropriate implementations might lead to unexpected costs.
|
||||
@ -30,8 +29,8 @@ Comparing to Canvas, some users might be more familiar with the DOM/SVG. And the
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3cRGRb5nB_UAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b-g0RoOpI3sAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' />
|
||||
|
||||
- http://g6.antv.antgroup.com/en/examples/item/customNode/#card
|
||||
- http://g6.antv.antgroup.com/en/examples/item/customNode/#cardNode
|
||||
- https://g6-v4.antv.vision/en/examples/item/customNode/#card
|
||||
- https://g6-v4.antv.vision/en/examples/item/customNode/#cardNode
|
||||
|
||||
For the inspectable ability of SVG, although the canvas does not support it, we could print the shapes and their attributes by the following ways to debug:
|
||||
|
||||
@ -45,7 +44,7 @@ const node = graph.findById('node1'); // find a node item on the graph
|
||||
const nodeShapeGroup = node.getContainer(); // get the node's graphics group
|
||||
const nodeShapes = nodeShapeGroup.get('children'); // get all the shapes in the node's graphics group
|
||||
const keyShape = node.getKeyShape(); // get the key shape of the node, which is a child shape in nodeShapes
|
||||
const labelShape = nodeShapeGroup.find(ele => ele.get('name') === 'label-shape'); // get the shape with name 'label-shape', which is also a child shape in nodeShapes. name is assigned when calling addShape
|
||||
const labelShape = nodeShapeGroup.find((ele) => ele.get('name') === 'label-shape'); // get the shape with name 'label-shape', which is also a child shape in nodeShapes. name is assigned when calling addShape
|
||||
console.log(nodeShapes[0].attr(), keyShape.attr(), labelShape.attr()); // get and print the shape's style attributes
|
||||
```
|
||||
|
||||
@ -57,7 +56,8 @@ The rendering performance depends on the number of shapes on the canvas to a gre
|
||||
|
||||
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WUI9Sr9E5a0AAAAAAAAAAAAADmJ7AQ/original" width=300 alt='' />
|
||||
|
||||
We suggest:
|
||||
We suggest:
|
||||
|
||||
- Cut down the unnecessary shapes. e.g. if you want to add stroke, configure `lineWidth` and `stroke` for a shape instead of adding an extra background shape.
|
||||
- Hide the invisible shapes by `visible: false` instead of `opacity: 0`. And control the visibility by `shape.show()` or `shape.hide()` in `update` or `draw` according to your requirement. e.g.
|
||||
|
||||
@ -71,12 +71,11 @@ circleShape.show(); // show
|
||||
circleShape.hide(); // hide
|
||||
```
|
||||
|
||||
- Adjust the visibility of shapes according to the detail/zoom level of the graph. On small graphs, it is feasible to show every detail information of a node data on the displaying node, since the users are interested in the detail in those cases. But on large graphs with a small zoom ratio, user will be more interested about the overview structure of the data, and the detail when they zoom-in the graph. So we suggest to adjust the visibility of shapes according to detail/zoom level to reduce the clutter of information, and improve the performance in the same time. Try to zoom-in and zoom-out the graph in this Demo [Decision Tree](http://g6.antv.antgroup.com/en/examples/case/treeDemos/#decisionTree), you will see the shapes being hidden and shown graciously (9 shapes in detail view, 2 shapes in overview).
|
||||
- Adjust the visibility of shapes according to the detail/zoom level of the graph. On small graphs, it is feasible to show every detail information of a node data on the displaying node, since the users are interested in the detail in those cases. But on large graphs with a small zoom ratio, user will be more interested about the overview structure of the data, and the detail when they zoom-in the graph. So we suggest to adjust the visibility of shapes according to detail/zoom level to reduce the clutter of information, and improve the performance in the same time. Try to zoom-in and zoom-out the graph in this Demo [Decision Tree](https://g6-v4.antv.vision/en/examples/case/treeDemos/#decisionTree), you will see the shapes being hidden and shown graciously (9 shapes in detail view, 2 shapes in overview).
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HS5gQ6yCiL4AAAAAAAAAAAAAARQnAQ" width=500 alt='' />
|
||||
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*b03ARph0fyUAAAAAAAAAAAAADmJ7AQ/original" width=500 alt='' />
|
||||
|
||||
|
||||
### Implement the Update Function for Custom Items
|
||||
|
||||
For convenience, fresh men usually only implement `draw` or `drawShape` in custom node/edge/combo. We also encourage that in small graphs, which will reduce the cost for developing and learning. But it also brings extra performance cost. There might be several situations when customize a node:
|
||||
@ -95,9 +94,13 @@ The custom node will not extend any existing node type, and nor have its own `up
|
||||
2. Gave the third parameter for `G6.registerNode`, but did not implement `update`:
|
||||
|
||||
```javascript
|
||||
G6.registerNode('custom-node', {
|
||||
draw: (cfg, group) => {},
|
||||
}, 'circle'); // extend built-in circle type node
|
||||
G6.registerNode(
|
||||
'custom-node',
|
||||
{
|
||||
draw: (cfg, group) => {},
|
||||
},
|
||||
'circle',
|
||||
); // extend built-in circle type node
|
||||
```
|
||||
|
||||
`custom-node` will extend the built-in `circle` type node, including its functions like `update`, `setState`, and so on. Sometimes, you may find the custom-node is not updated as expected, e.g. some strange shapes or styles occurs. It is due to the `draw` of `custom-node` and the `draw` of extended `circle` type are so different that `circle`'s `update` (which matches its own shapes defined in its `draw`) does not match `custom-node`'s shapes. To address the problem, a simplest way is rewriting `update` as `undefined`. But it also brings the extra cost like the first situation.
|
||||
@ -105,15 +108,20 @@ G6.registerNode('custom-node', {
|
||||
3. Gave the third parameter for `G6.registerNode`, and rewrote `update: undefined`:
|
||||
|
||||
```javascript
|
||||
G6.registerNode('custom-node', {
|
||||
draw: (cfg, group) => {},
|
||||
update: undefined, // rewrite update
|
||||
}, 'circle'); // extend built-in circle type node
|
||||
G6.registerNode(
|
||||
'custom-node',
|
||||
{
|
||||
draw: (cfg, group) => {},
|
||||
update: undefined, // rewrite update
|
||||
},
|
||||
'circle',
|
||||
); // extend built-in circle type node
|
||||
```
|
||||
|
||||
As it is described in the second situation, since there is no `update` for custom-node, the defined `draw` will be called at first rendering and any updating, e.g. `graph.updateItem`, `node.refresh`, etc. It leads to group clearing, shape destroying, and shapes re-initiating. That is the costs.
|
||||
|
||||
Therefore, we should utilize the life hooks of node with reasonable codes for better performance:
|
||||
|
||||
```javascript
|
||||
G6.registerNode('custom-node', {
|
||||
draw: (cfg, group) => {
|
||||
@ -137,7 +145,7 @@ It requires developers to have clear management for shapes. Similar to the hooks
|
||||
|
||||
Different from other edge types, polyline calculates its path by A* path finding algorithm when its `controlPoints` is not defined. A* is an algorithm with high complexity. The performance issue will be extremely significant when dragging nodes, since the algorithm will be re-calculated frequently during dragging. There are some tips to alleviate the problem:
|
||||
|
||||
- Custom simple polyline instead using the built-in polyline. There is a demo [Custom Polyline](http://g6.antv.antgroup.com/en/examples/item/customEdge/#customPolyline). In most cases, the bending positions are at the 1/3 and 2/3 of the line between source node and target node (the beginning position from source node is `startPoint` and the ending position from the target node is `endPoint` in the following example):
|
||||
- Custom simple polyline instead using the built-in polyline. There is a demo [Custom Polyline](https://g6-v4.antv.vision/en/examples/item/customEdge/#customPolyline). In most cases, the bending positions are at the 1/3 and 2/3 of the line between source node and target node (the beginning position from source node is `startPoint` and the ending position from the target node is `endPoint` in the following example):
|
||||
|
||||
```javascript
|
||||
[
|
||||
@ -145,10 +153,11 @@ Different from other edge types, polyline calculates its path by A* path finding
|
||||
['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],
|
||||
['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],
|
||||
['L', endPoint.x, endPoint.y],
|
||||
]
|
||||
];
|
||||
```
|
||||
|
||||
- If you are using `dagre` layout, enable its `controlPoints` to calculate the bending positions for polyline by `dagre`, which means the `controlPoints` will be given by the layout and A* will not be called anymore:
|
||||
- If you are using `dagre` layout, enable its `controlPoints` to calculate the bending positions for polyline by `dagre`, which means the `controlPoints` will be given by the layout and A\* will not be called anymore:
|
||||
|
||||
```javascript
|
||||
const graph = new Graph({
|
||||
// ... other configurations
|
||||
@ -158,14 +167,14 @@ const graph = new Graph({
|
||||
// ... other configurations
|
||||
},
|
||||
defaultEdge: {
|
||||
type: 'polyline'
|
||||
}
|
||||
})
|
||||
type: 'polyline',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Enable Optimize Configurations for Behaviors
|
||||
|
||||
Local refresh happens on updating node/edge/combo's configurations, states, and so on, which means renderer only clears the dirty bounding box and redraws the updated shapes. Renderer will clear the whole canvas and redraw at global updates like panning canvas and zooming canvas. That is to say, global updates cost much more than local updates. For example, when user drags or zooms the canvas, the clearing and redrawing are frequently repeated. So the user may find it is not so smooth in large graph with such behaviors. G6 supports `enableOptimize` option for built-in behaviors `zoom-canvas` and `drag-canvas`, which is `false` by default. Assign it with `true`, all the shapes besides keyShapes will be hidden during panning and zooming. ([keyShape](http://g6.antv.antgroup.com/en/manual/middle/elements/shape/shape-keyshape) is the shape returned by `draw` function of `G6.registerNode`, `G6.registerEdge`, and `G6.registerCombo`). After panning and zooming, the hidden shapes will be shown again. It will enhance the performance of these global updates a lot.
|
||||
Local refresh happens on updating node/edge/combo's configurations, states, and so on, which means renderer only clears the dirty bounding box and redraws the updated shapes. Renderer will clear the whole canvas and redraw at global updates like panning canvas and zooming canvas. That is to say, global updates cost much more than local updates. For example, when user drags or zooms the canvas, the clearing and redrawing are frequently repeated. So the user may find it is not so smooth in large graph with such behaviors. G6 supports `enableOptimize` option for built-in behaviors `zoom-canvas` and `drag-canvas`, which is `false` by default. Assign it with `true`, all the shapes besides keyShapes will be hidden during panning and zooming. ([keyShape](https://g6-v4.antv.vision/en/manual/middle/elements/shape/shape-keyshape) is the shape returned by `draw` function of `G6.registerNode`, `G6.registerEdge`, and `G6.registerCombo`). After panning and zooming, the hidden shapes will be shown again. It will enhance the performance of these global updates a lot.
|
||||
|
||||
Configure `enableOptimize` to `true`:
|
||||
|
||||
@ -173,17 +182,20 @@ Configure `enableOptimize` to `true`:
|
||||
const graph = new Graph({
|
||||
// ...other configurations
|
||||
modes: {
|
||||
default: [{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true,
|
||||
// ... other configurations
|
||||
}, {
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true,
|
||||
// ... other configurations
|
||||
}]
|
||||
}
|
||||
})
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true,
|
||||
// ... other configurations
|
||||
},
|
||||
{
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true,
|
||||
// ... other configurations
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Select a Proper Layout
|
||||
@ -214,4 +226,4 @@ Besides, the size of minimap is much smaller than main graph in usual. When ther
|
||||
|
||||
### Use Animation Properly
|
||||
|
||||
Animation costs a lot in usual. We suggest developers to use animation reasonably on local responses instead of globally, e.g. breath animation when hover a node, flow animation on selected edges. And developers should well manage the animations and stop them in time.
|
||||
Animation costs a lot in usual. We suggest developers to use animation reasonably on local responses instead of globally, e.g. breath animation when hover a node, flow animation on selected edges. And developers should well manage the animations and stop them in time.
|
||||
|
||||
@ -9,13 +9,12 @@ order: 13
|
||||
|
||||
### 性能瓶颈 — 渲染
|
||||
|
||||
在渲染方面，性能主要取决于当前画布上形状元素的个数，e.g. 一个节点上有矩形、文本、图片三个图形，一条边上有路径、文本两个图形，那么一份 100 个节点、50 条边的图数据，将渲染出 100 * 3 + 50 * 2 = 400 个图形。然而，开发者常常自定义非常复杂的节点，一个节点上可能有 10～20 个图形，那么画布上的图形数量将陡增。因此，尽可能地减少不必要的图形绘制，是提升渲染性能的主要手段。
|
||||
在渲染方面，性能主要取决于当前画布上形状元素的个数，e.g. 一个节点上有矩形、文本、图片三个图形，一条边上有路径、文本两个图形，那么一份 100 个节点、50 条边的图数据，将渲染出 100 _ 3 + 50 _ 2 = 400 个图形。然而，开发者常常自定义非常复杂的节点，一个节点上可能有 10 ～ 20 个图形，那么画布上的图形数量将陡增。因此，尽可能地减少不必要的图形绘制，是提升渲染性能的主要手段。
|
||||
|
||||
### 性能瓶颈 — 计算
|
||||
|
||||
计算方面，主要包括节点布局计算、折线自动寻径算法等。
|
||||
|
||||
|
||||
## 解决方案
|
||||
|
||||
G6 内部代码，我们在持续迭代其性能。而基于 G6 的图应用，则需要应用的开发者关注实现方式，不合理的实现方式很可能导致性能的额外开销。
|
||||
@ -26,11 +25,10 @@ G6 内部代码，我们在持续迭代其性能。而基于 G6 的图应用，
|
||||
|
||||
### 尽可能选择 Canvas 渲染
|
||||
|
||||
相比于 Canvas，可能部分开发者更熟悉 DOM/SVG 的定义，毕竟 SVG 渲染出来之后可以审查元素，更符合我们的日常调试习惯。比如当你在自定义节点中使用 `group.addShape('dom', {...})` 这种 'dom' 图形时，就必须要使用 SVG 渲染，即在图实例上配置 `renderer: 'svg'`。**但 SVG 的性能比 Canvas 差得多。** 在数据较大、节点比较复杂的情况下，我们强烈推荐你使用 Canvas 进行渲染。Canvas 定义图形的方式也非常灵活，完全可以覆盖 SVG 的能力，或任何看起来像 DOM 定义的卡片样式的节点。比如下面这两个例子，都是使用 Canvas 渲染和定义。
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3cRGRb5nB_UAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b-g0RoOpI3sAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' />
|
||||
相比于 Canvas，可能部分开发者更熟悉 DOM/SVG 的定义，毕竟 SVG 渲染出来之后可以审查元素，更符合我们的日常调试习惯。比如当你在自定义节点中使用 `group.addShape('dom', {...})` 这种 'dom' 图形时，就必须要使用 SVG 渲染，即在图实例上配置 `renderer: 'svg'`。**但 SVG 的性能比 Canvas 差得多。** 在数据较大、节点比较复杂的情况下，我们强烈推荐你使用 Canvas 进行渲染。Canvas 定义图形的方式也非常灵活，完全可以覆盖 SVG 的能力，或任何看起来像 DOM 定义的卡片样式的节点。比如下面这两个例子，都是使用 Canvas 渲染和定义。 <img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*3cRGRb5nB_UAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' /><img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*b-g0RoOpI3sAAAAAAAAAAABkARQnAQ" width=300 style="display: inline-flex" alt='' />
|
||||
|
||||
- http://g6.antv.antgroup.com/examples/item/customNode/#card
|
||||
- http://g6.antv.antgroup.com/examples/item/customNode/#cardNode
|
||||
- https://g6-v4.antv.vision/examples/item/customNode/#card
|
||||
- https://g6-v4.antv.vision/examples/item/customNode/#cardNode
|
||||
|
||||
回到 SVG 容易审查这个优势，虽然 Canvas 上没有办法审查每一个图形，但我们可以通过下面方式打印图形的属性，进行调试：
|
||||
|
||||
@ -44,7 +42,7 @@ const node = graph.findById('node1'); // 找到某个节点对象
|
||||
const nodeShapeGroup = node.getContainer(); // 获取该节点的图形分组
|
||||
const nodeShapes = nodeShapeGroup.get('children'); // 获取改节点中的所有图形
|
||||
const keyShape = node.getKeyShape(); // 获取该节点的关键图形，keyShape 在 nodeShapes 中
|
||||
const labelShape = nodeShapeGroup.find(ele => ele.get('name') === 'label-shape'); // 获取 name 为 'label-shape' 的图形（name 在 addShape 时指定）。labelShape 在 nodeShapes 中
|
||||
const labelShape = nodeShapeGroup.find((ele) => ele.get('name') === 'label-shape'); // 获取 name 为 'label-shape' 的图形（name 在 addShape 时指定）。labelShape 在 nodeShapes 中
|
||||
console.log(nodeShapes[0].attr(), keyShape.attr(), labelShape.attr()); // 获取并打印图形的属性
|
||||
```
|
||||
|
||||
@ -52,11 +50,11 @@ console.log(nodeShapes[0].attr(), keyShape.attr(), labelShape.attr()); // 获取
|
||||
|
||||
### 减少自定义元素的图形数量
|
||||
|
||||
图的渲染性能很大程度取决于画布上图形的数量。有时虽然数据层面只有 100 个节点，但由于自定义节点非常复杂，每个节点达到数十个图形，再加上复杂的自定义边，可能图上图形也能够达到上万。比如下面这个节点上有二十七个图形（因为节点带滚动，部分文字、锚点被隐藏）：
|
||||
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WUI9Sr9E5a0AAAAAAAAAAAAADmJ7AQ/original" width=300 alt='' />
|
||||
图的渲染性能很大程度取决于画布上图形的数量。有时虽然数据层面只有 100 个节点，但由于自定义节点非常复杂，每个节点达到数十个图形，再加上复杂的自定义边，可能图上图形也能够达到上万。比如下面这个节点上有二十七个图形（因为节点带滚动，部分文字、锚点被隐藏）： <img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*WUI9Sr9E5a0AAAAAAAAAAAAADmJ7AQ/original" width=300 alt='' />
|
||||
|
||||
- 减少不必要的图形。例如，给矩形增加边框，不需要新增图形，只需要给矩形设置描边粗细 `lineWidth` 和描边色 `stroke` 即可。
|
||||
- 默认看不见的图形，设置 `visible: false`（而不是 `opacity: 0`）进行隐藏。在自定义节点的 `update` 方法或 `draw` 方法中，根据情况再通过 `shape.show()` 将其显示出来或 `shape.hide()` 再次隐藏，e.g.
|
||||
|
||||
```javascript
|
||||
const circleShape = group.addShape('circle', {
|
||||
attrs: {}, // 在 attrs 中设置 opacity: 0 也能达到看不见的目的，但实际上还是渲染了，更推荐使用 visible 控制
|
||||
@ -66,12 +64,12 @@ const circleShape = group.addShape('circle', {
|
||||
circleShape.show(); // 显示
|
||||
circleShape.hide(); // 隐藏
|
||||
```
|
||||
- 根据缩放等级，调整显示的图形。在小规模的图上，每个节点都有详细信息性能问题不大，且用户也许需要在每个节点上看到如此详细的信息。但在较大规模的图上，概览时用户更关心的是图的关系结构，此时我们应当考虑，根据情况调整自定义节点上图形的数量，隐藏不必要的信息。这样做一方面可以减小渲染的压力，另一方面可以让用户更高效地获得更清晰的信息。在官网案例[决策树](http://g6.antv.antgroup.com/examples/case/treeDemos/#decisionTree)中，进行画布的缩放，可以看到详情（左）和缩略节点（右）的优雅切换。每个节点上图形显示的图形数量从 9 个（详细）降低到 2 个（缩略）。
|
||||
|
||||
- 根据缩放等级，调整显示的图形。在小规模的图上，每个节点都有详细信息性能问题不大，且用户也许需要在每个节点上看到如此详细的信息。但在较大规模的图上，概览时用户更关心的是图的关系结构，此时我们应当考虑，根据情况调整自定义节点上图形的数量，隐藏不必要的信息。这样做一方面可以减小渲染的压力，另一方面可以让用户更高效地获得更清晰的信息。在官网案例[决策树](https://g6-v4.antv.vision/examples/case/treeDemos/#decisionTree)中，进行画布的缩放，可以看到详情（左）和缩略节点（右）的优雅切换。每个节点上图形显示的图形数量从 9 个（详细）降低到 2 个（缩略）。
|
||||
|
||||
<img src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*HS5gQ6yCiL4AAAAAAAAAAAAAARQnAQ" width=500 alt='' />
|
||||
<img src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*b03ARph0fyUAAAAAAAAAAAAADmJ7AQ/original" width=500 alt='' />
|
||||
|
||||
|
||||
### 为自定义元素实现 update 方法
|
||||
|
||||
初学者为了方便自定义节点/边/ combo，往往只定义 `draw` 或 `drawShape` 方法，我们也鼓励在小规模图上这样做，可以减少一些开发成本和学习成本。但这将带来额外的性能开销。以自定义节点为例，可能有以下几种情况：
|
||||
@ -90,9 +88,13 @@ G6.registerNode('custom-node', {
|
||||
2. `G6.registerNode` 第三个参数指定了被继承的节点类型名，没有复写 `update`，如下：
|
||||
|
||||
```javascript
|
||||
G6.registerNode('custom-node', {
|
||||
draw: (cfg, group) => {},
|
||||
}, 'circle'); // 继承内置 circle 类型节点
|
||||
G6.registerNode(
|
||||
'custom-node',
|
||||
{
|
||||
draw: (cfg, group) => {},
|
||||
},
|
||||
'circle',
|
||||
); // 继承内置 circle 类型节点
|
||||
```
|
||||
|
||||
此时，`custom-node` 将继承内置 `circle` 类型节点的 `update`、`setState` 等方法。有时，可能发现节点更新时，似乎有不符合预期的图形出现，这是由于 `custom-node` 的 `draw` 方法和 `circle` 类型节点的 `draw` 方法差异太大，以至于 `circle` 类型节点按照自己在 `draw` 方法中定义的图形进行更新，与 `custom-node` 逻辑不匹配。解决这一问题最简单的方法就是将 `update` 复写为 `undefined`。此时，就带来了和第一种情况类似的、不实现 `update` 方法的性能开销。
|
||||
@ -100,15 +102,20 @@ G6.registerNode('custom-node', {
|
||||
3. `G6.registerNode` 第三个参数指定了被继承的节点类型名，复写 `update: undefined`，如下：
|
||||
|
||||
```javascript
|
||||
G6.registerNode('custom-node', {
|
||||
draw: (cfg, group) => {},
|
||||
update: undefined, // 被复写
|
||||
}, 'circle'); // 继承内置 circle 类型节点
|
||||
G6.registerNode(
|
||||
'custom-node',
|
||||
{
|
||||
draw: (cfg, group) => {},
|
||||
update: undefined, // 被复写
|
||||
},
|
||||
'circle',
|
||||
); // 继承内置 circle 类型节点
|
||||
```
|
||||
|
||||
上面第二种情况所述的，更新时出现不符合预期的图形或样式问题在复写 `update: undefined` 后应当不复存在。但带来了不实现 `update` 方法的性能开销。即所有的更新，例如通过外部或外部调用的 `graph.updateItem`、`node.refresh` 等方法，都将擦除该节点上的所有图形，并重新走一遍 `draw` 方法。这也意味着这个节点上的所有图形将被销毁和重新实例化。
|
||||
|
||||
因此，为了更好的渲染性能，最合理的实现是充分利用节点的生命周期，在不同生命周期给出不同的增量逻辑。如下：
|
||||
|
||||
```javascript
|
||||
G6.registerNode('custom-node', {
|
||||
draw: (cfg, group) => {
|
||||
@ -125,23 +132,26 @@ G6.registerNode('custom-node', {
|
||||
},
|
||||
}, 'circle'); // 继承内置 circle 类型节点
|
||||
```
|
||||
|
||||
当然，这要求开发者能够对节点上图形的更新有足够清晰管理逻辑。就像 React 的 `componentDidMount`、`componentDidUpdate` 等生命周期函数一样，不同的 props 变更做出不同的响应。相信只要理解了这一原理，你也能轻松做到。
|
||||
|
||||
### 合理使用折线边 polyline
|
||||
|
||||
与其他类型的边不同，折线类型边(polyline)在未指定 `controlPoints`（拐折点）时，将使用 A* 自动寻径算法，根据起点和终点的位置，自动计算折线弯折的位置。这一计算的复杂度较高，特别是在拖拽节点的过程中，相关的边需要实时根据最新的端点位置，频繁地计算 A* 算法。因此，当图上的 polyline 边比较多时，可能出现卡顿现象。根据你的实际情况，可以选择如下方法进行避免：
|
||||
|
||||
- 参考官网案例[自定义折线](http://g6.antv.antgroup.com/zh/examples/item/customEdge/#customPolyline)。大部分情况下，折线两个弯折位置分别在两端点（下面例子的`startPoint`、`endPoint`）连线的 1/3 和 2/3 处，其实我们可以轻易计算出简单的折线路径。
|
||||
- 参考官网案例[自定义折线](https://g6-v4.antv.vision/zh/examples/item/customEdge/#customPolyline)。大部分情况下，折线两个弯折位置分别在两端点（下面例子的`startPoint`、`endPoint`）连线的 1/3 和 2/3 处，其实我们可以轻易计算出简单的折线路径。
|
||||
|
||||
```javascript
|
||||
[
|
||||
['M', startPoint.x, startPoint.y],
|
||||
['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y],
|
||||
['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y],
|
||||
['L', endPoint.x, endPoint.y],
|
||||
]
|
||||
];
|
||||
```
|
||||
|
||||
- 若你使用的布局算法是 `dagre`，那么可以打开它的 `controlPoints` 配置。`dagre` 算法将为 polyline 边计算控制点，有了控制点，polyline 将不再使用 A* 自动寻径算法，配置方法如下：
|
||||
- 若你使用的布局算法是 `dagre`，那么可以打开它的 `controlPoints` 配置。`dagre` 算法将为 polyline 边计算控制点，有了控制点，polyline 将不再使用 A\* 自动寻径算法，配置方法如下：
|
||||
|
||||
```javascript
|
||||
const graph = new Graph({
|
||||
// ... 其他配置
|
||||
@ -149,8 +159,8 @@ const graph = new Graph({
|
||||
type: 'dagre',
|
||||
controlPoints: true,
|
||||
// ... 其他配置
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 打开交互的优化配置项
|
||||
@ -158,21 +168,25 @@ const graph = new Graph({
|
||||
设置节点/边的状态样式、拖拽节点等，基本都是局部更新，即渲染器只会擦除更新前的“脏矩形”，绘制上更新后的图形。但平移画布、缩放画布，在 Canvas 层面上，实际上是整个画布的擦除和重绘，并且在平移/缩放的过程中，这一重绘是极其频繁地被执行的。因此在较大规模的图上，用户可能会明显感觉到平移、缩放画布时非常卡顿。内置的缩放画布 `zoom-canvas` 和拖拽平移画布 `drag-canvas` 交互支持配置项 `enableOptimize`，设置为 `true` 时，在拖拽/缩放过程中，非关键图形（即 `G6.registerNode`、`G6.registerEdge`、`G6.registerCombo` 的 `draw` 返回的图形）将会被隐藏。拖拽/缩放结束后，哪些临时被隐藏的图形将恢复显示。这样能够大大提升拖拽/缩放过程中的帧率。
|
||||
|
||||
默认情况下 `enableOptimize` 是 `false`，可以通过下面方式配置：
|
||||
|
||||
```javascript
|
||||
const graoh = new Graph({
|
||||
// ...其他配置项
|
||||
modes: {
|
||||
default: [{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true,
|
||||
// ... 其他配置
|
||||
}, {
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true,
|
||||
// ... 其他配置
|
||||
}]
|
||||
}
|
||||
})
|
||||
default: [
|
||||
{
|
||||
type: 'drag-canvas',
|
||||
enableOptimize: true,
|
||||
// ... 其他配置
|
||||
},
|
||||
{
|
||||
type: 'zoom-canvas',
|
||||
enableOptimize: true,
|
||||
// ... 其他配置
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 选择合适的布局算法
|
||||
@ -203,4 +217,4 @@ Minimap 是 G6 的小地图插件，用作图的导览。它有三种类型：`'
|
||||
|
||||
### 合理地使用动画
|
||||
|
||||
动画的性能开销一般比较大，更建议动画使用在局部的状态响应时。例如 hover 节点时的呼吸效果、相关上下游的边流动效果等。并及时地停止动画。
|
||||
动画的性能开销一般比较大，更建议动画使用在局部的状态响应时。例如 hover 节点时的呼吸效果、相关上下游的边流动效果等。并及时地停止动画。
|
||||
|
||||
@ -102,4 +102,4 @@ This application uses simulated social network data as an example to demonstrate
|
||||
|
||||
## Application Address
|
||||
|
||||
<br />Official website of G6: <a href='https://g6.antv.antgroup.com/' target='_blank'>https://g6.antv.antgroup.com/</a> <br />GitHub of G6: <a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
<br />Official website of G6: <a href='https://g6-v4.antv.vision/' target='_blank'>https://g6-v4.antv.vision/</a> <br />GitHub of G6: <a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
|
||||
@ -102,4 +102,4 @@ A 和 B 之间可能会存在多个同事关系，如 A 和 B 在 company1 公
|
||||
|
||||
## 应用地址
|
||||
|
||||
<br />G6 官网：<a href='https://g6.antv.antgroup.com/' target='_blank'>https://g6.antv.antgroup.com/</a> <br />G6 GitHub：<a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
<br />G6 官网：<a href='https://g6-v4.antv.vision/' target='_blank'>https://g6-v4.antv.vision/</a> <br />G6 GitHub：<a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
|
||||
@ -85,4 +85,4 @@ In general, the emergency workbench is deeply focused on business scenarios, pro
|
||||
|
||||
## Demo Address
|
||||
|
||||
Code: <a href='https://github.com/scaletimes/g6-flow-demo.git' target='_blank'>https://github.com/scaletimes/g6-flow-demo</a> <br />Official website of G6: <a href='https://g6.antv.antgroup.com/' target='_blank'>https://g6.antv.antgroup.com/</a> <br />GitHub of G6: <a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
Code: <a href='https://github.com/scaletimes/g6-flow-demo.git' target='_blank'>https://github.com/scaletimes/g6-flow-demo</a> <br />Official website of G6: <a href='https://g6-v4.antv.vision/' target='_blank'>https://g6-v4.antv.vision/</a> <br />GitHub of G6: <a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
|
||||
@ -85,4 +85,4 @@ order: 0
|
||||
|
||||
## 应用地址
|
||||
|
||||
源码：<a href='https://github.com/scaletimes/g6-flow-demo.git' target='_blank'>https://github.com/scaletimes/g6-flow-demo</a> <br />G6 官网：<a href='https://g6.antv.antgroup.com/' target='_blank'>https://g6.antv.antgroup.com/</a> <br />G6 GitHub：<a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
源码：<a href='https://github.com/scaletimes/g6-flow-demo.git' target='_blank'>https://github.com/scaletimes/g6-flow-demo</a> <br />G6 官网：<a href='https://g6-v4.antv.vision/' target='_blank'>https://g6-v4.antv.vision/</a> <br />G6 GitHub：<a href='https://github.com/antvis/g6' target='_blank'>https://github.com/antvis/g6</a>
|
||||
|
||||
@ -16,7 +16,7 @@ In G6 V3.7.0 and later version, user are allow to use JSX-like syntax to customi
|
||||
|
||||
The basic syntax is almost the same as the familiar HTML markup language, where you can use shape or group by a tag. At the same time, you need to assign the attributes for defining a shape. Style attributes are grouped to an object, whose items' value can be `string`, `number`, and others supported by JSON (note that it cannot be a function here, which will cause parsing errors).
|
||||
|
||||
Reference for the type and style of custom nodes: https://g6.antv.antgroup.com/api/shape-properties Among them, for relative positioning, we newly added **marginTop** and **marginLeft** to define the gap between the left and top.
|
||||
Reference for the type and style of custom nodes: https://g6-v4.antv.vision/api/shape-properties Among them, for relative positioning, we newly added **marginTop** and **marginLeft** to define the gap between the left and top.
|
||||
|
||||
#### Recommended Usage
|
||||
|
||||
@ -86,10 +86,10 @@ const data = {
|
||||
id: 'node1',
|
||||
type: 'xml-card', // the custom node's type name
|
||||
metric: 'CPU usage',
|
||||
cpuUsage: 80
|
||||
cpuUsage: 80,
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
// def for the drawing of the percentage bar
|
||||
const percentageBar = ({ width, used, height = 12 }) => `
|
||||
|
||||
@ -16,7 +16,7 @@ order: 4
|
||||
|
||||
基础语法和大家熟悉的 HTML 标记语言基本相同，通过标签名来使用 shape 或者 group，同时定义 shape 需要填写 shape 的各个 attributes，而定义形状样式的 attrs 则由 style 属性来进行表达。style 里面的结构是一个 Object，对象的值可以是字符串，数字等 JSON 支持的数据类型（注意，这里不能够是函数，函数只会导致解析错误）。
|
||||
|
||||
自定义节点的类型和 style 参考：https://g6.antv.antgroup.com/api/shape-properties 其中，为了相对定位，我们新加入了 marginTop 和 marginLeft 来定义左边和上面的间隔。
|
||||
自定义节点的类型和 style 参考：https://g6-v4.antv.vision/api/shape-properties 其中，为了相对定位，我们新加入了 marginTop 和 marginLeft 来定义左边和上面的间隔。
|
||||
|
||||
#### 推荐用法
|
||||
|
||||
@ -86,10 +86,10 @@ const data = {
|
||||
id: 'node1',
|
||||
type: 'xml-card', // 使用自定义的节点名称
|
||||
metric: 'CPU usage',
|
||||
cpuUsage: 80
|
||||
cpuUsage: 80,
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
// 定义进度条的绘制方式
|
||||
const percentageBar = ({ width, used, height = 12 }) => `
|
||||
|
||||
@ -5,8 +5,8 @@ order: 0
|
||||
|
||||
There are several plugins in G6 which can be used for G6's graph or other applications.
|
||||
|
||||
- [Legend](#legend) *supported by v4.3.0 and later versions*
|
||||
- [SnapLine](#snapline) *supported by v4.3.0 and later versions*
|
||||
- [Legend](#legend) _supported by v4.3.0 and later versions_
|
||||
- [SnapLine](#snapline) _supported by v4.3.0 and later versions_
|
||||
- [Grid](#grid)
|
||||
- [Minimap](#minimap)
|
||||
- [Edge Bundling](#edge-bundling)
|
||||
@ -34,25 +34,25 @@ const graph = new G6.Graph({
|
||||
|
||||
## Legend
|
||||
|
||||
Legend is a built-in legend plugin for G6. It is useful for npde/edge type demonstration, and the end-users are able to interact with the legend to highlight and filter the items on the graph. *supported by v4.3.0 and later versions*.
|
||||
Legend is a built-in legend plugin for G6. It is useful for npde/edge type demonstration, and the end-users are able to interact with the legend to highlight and filter the items on the graph. _supported by v4.3.0 and later versions_.
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UmXzQLG65vYAAAAAAAAAAAAAARQnAQ' alt="img" width='500px'>
|
||||
|
||||
### Configuration
|
||||
|
||||
| Name | Type | Description |
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| data | GraphData | The data for the legend, not related to the data of the graph. The legend for nodes currently supports `'circle'`, `'rect'`, and `'ellipse'`. The legend for edges currently supports `'line'`, `'cubic'`, and `'quadratic'`. `type` for each data means the type of the legend item, and the `order` could be assigned to each node/edge data for ordering in a legend group |
|
||||
| position | 'top' / 'top-left' / 'top-right' / 'right' / 'right-top' / 'right-bottom' / 'left' / 'left-top' / 'left-bottom' / 'bottom' / 'bottom-left' / 'bottom-right' | The relative of the position to the canvas. `'top'` by default, which means the legend area is on the top of the canvas |
|
||||
| padding | number / number[] | The inner distance between the content of the legend to the border of the legend area. Array with four numbers means the padding to the top, right, bottom, and left responsively |
|
||||
| margin | number / number[] | The outer distance between the legend area to the border of the canvas. Array with four numbers means the distance to the top, right, bottom, and left responsively. Only the top distance takes effect when `position:'top'`, situations for other `position` configurations are similar to it |
|
||||
| margin | number / number[] | The outer distance between the legend area to the border of the canvas. Array with four numbers means the distance to the top, right, bottom, and left responsively. Only the top distance takes effect when `position:'top'`, situations for other `position` configurations are similar to it |
|
||||
| offsetX | number | The x-axis offset for the legend area, it is useful when you want to adjust the position of the lenged slightly |
|
||||
| offsetY | number | The y-axis offset for the legend area, it is useful when you want to adjust the position of the lenged slightly |
|
||||
| containerStyle | ShapeStyle | The style for the background rect, the format is similar as [rect shape style](/en/docs/api/shape-properties#rect) |
|
||||
| horiSep | number | The horizontal seperation of the legend items |
|
||||
| vertiSep | number | The vertical seperation of the legend items |
|
||||
| layout | 'vertical' / 'horizontal' | The layout of the legend items. `'horizontal'` by default |
|
||||
| align | 'center' / 'right' / 'left' | The alignment of the legend items. `'center'` by default |
|
||||
| align | 'center' / 'right' / 'left' | The alignment of the legend items. `'center'` by default |
|
||||
| title | string | The title string for the legend, the style of the title could be configured by `titleConfig` |
|
||||
| titleConfig | object | The style of the legend title, detail configurations are shown in following lines |
|
||||
| titleConfig.position | 'center' / 'right' / 'left' | The alignment of the title to the legend content. `'center'` by default |
|
||||
@ -63,19 +63,18 @@ Legend is a built-in legend plugin for G6. It is useful for npde/edge type demon
|
||||
| filter.enable | boolean | Whether allow filtering the items in the main graph while the end-user interaction with the legend items. `false` by default |
|
||||
| filter.multiple | boolean | Whether support active multiple types of legend items, `false` by default, which means only one type of legend item will be activated in the same time. If it is `true`, multiple items could be activated only when the `filter.trigger` is `'click'` |
|
||||
| filter.trigger | 'click' / 'mouseenter' | The interaction way to the legend items. `click` by default, which means while the end-user clicking a legend item, the legend item and corresponding filtered items on the main graph will be activated |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | The state styles for the legend items while filtering, inluding `filter.legendStateStyles.active` and `filter.legendStateStyles.inactive`. The type of each one is `ShapeStyle`. Similar to the `nodeStateStyles` of Graph |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | The state styles for the legend items while filtering, inluding `filter.legendStateStyles.active` and `filter.legendStateStyles.inactive`. The type of each one is `ShapeStyle`. Similar to the `nodeStateStyles` of Graph |
|
||||
| filter.graphActiveState | string | The activate state name for the items on the main graph. When a lenged item is activated, the corresponding items of the main graph will be set to `filter.graphActiveState`, `'active'` by default. And you should assign the state style for this state name on Graph |
|
||||
| filter.graphInactiveState | string | The inactivate state name for the items on the main graph. When a lenged item is inactivated, the corresponding items of the main graph will be set to `filter.graphInactiveState`, `'inactive'` by default. And you should assign the state style for this state name on Graph |
|
||||
| filter.filterFunctions | { [key: string]: (d) => boolean; } | Since the data of the legend is not related to the main graph, you should configure filtering functions for each legend item type. The `key` is corresponding to the `type` of the legend item, and the value is a function. For the function, the parameter is the item data of the main graph, and the return value is a boolean which means whether the item of the main graph should be activated |
|
||||
|
||||
|
||||
## SnapLine
|
||||
|
||||
SnapLine is a built-in components in G6. *supported by v4.3.0 and later versions*.
|
||||
SnapLine is a built-in components in G6. _supported by v4.3.0 and later versions_.
|
||||
|
||||
### Configuration
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
| Name | Type | Required | Description |
|
||||
| ------------- | --------------------------------------------- | -------- | --------------------- |
|
||||
| line | ShapeStyle | false | the style of SnapLine |
|
||||
| itemAlignType | boolean、'horizontal' 、'vertical'、'center'; | false | the type of SnapLine |
|
||||
@ -114,7 +113,6 @@ It can be configured to adjust the styles and functions.
|
||||
| delegateStyle | Object | false | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph |
|
||||
| hideEdge | Boolean | false | **Supported by v4.7.16** Whether to hide the edges on minimap to enhance the performance |
|
||||
|
||||
|
||||
The `delegateStyle` has the properties:
|
||||
|
||||
| Name | Type | Required | Description |
|
||||
@ -163,7 +161,7 @@ Menu is used to configure the right-click menu on the node.
|
||||
| offsetX | number | 6 | the offset of tooltip along x axis, the padding of the parent container should be take into consider |
|
||||
| offsetY | number | 6 | the offset of tooltip along y axis, the padding of the parent container should be take into consider |
|
||||
| itemTypes | string[] | ['node', 'edge', 'combo'] | the item types that allow the tooltip show up. e.g. if you only want the node tooltip, set the `itemTypes` to be ['node'] |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | the trigger for the menu, `'contextmenu'` by default, which means the menu will show up when the end user right click on some item. `'click'` means left click. *'click' is supported by v4.3.2 and later versions* |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | the trigger for the menu, `'contextmenu'` by default, which means the menu will show up when the end user right click on some item. `'click'` means left click. _'click' is supported by v4.3.2 and later versions_ |
|
||||
|
||||
### Usage
|
||||
|
||||
@ -194,11 +192,11 @@ const menu = new G6.Menu({
|
||||
<li>menu01</li>
|
||||
<li>menu01</li>
|
||||
<li>menu01</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleMenuClick(target, item, graph) {
|
||||
console.log(target, item, graph)
|
||||
console.log(target, item, graph);
|
||||
},
|
||||
});
|
||||
|
||||
@ -222,7 +220,7 @@ const menu = new G6.Menu({
|
||||
</ul>`;
|
||||
},
|
||||
handleMenuClick(target, item) {
|
||||
console.log(target, item)
|
||||
console.log(target, item);
|
||||
},
|
||||
});
|
||||
|
||||
@ -283,7 +281,7 @@ const toolbar = new G6.ToolBar({
|
||||
<li code='add'>Add Node</li>
|
||||
<li code='undo'>Undo</li>
|
||||
</ul>
|
||||
`
|
||||
`;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
if (code === 'add') {
|
||||
@ -291,12 +289,12 @@ const toolbar = new G6.ToolBar({
|
||||
id: 'node2',
|
||||
label: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
})
|
||||
y: 150,
|
||||
});
|
||||
} else if (code === 'undo') {
|
||||
toolbar.undo()
|
||||
toolbar.undo();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -318,12 +316,10 @@ const toolbar = new G6.ToolBar({
|
||||
<li>example 03</li>
|
||||
<li>example 04</li>
|
||||
<li>example 05</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
|
||||
}
|
||||
handleClick: (code, graph) => {},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -332,7 +328,6 @@ const graph = new G6.Graph({
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## ToolTip
|
||||
|
||||
ToolTip helps user to explore detail infomations on the node and edge. Do note that, This Tooltip Plugins will replace the tooltip in the built-in behavior after G6 4.0.
|
||||
@ -366,13 +361,12 @@ const tooltip = new G6.Tooltip({
|
||||
<h4>自定义tooltip</h4>
|
||||
<ul>
|
||||
<li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
itemTypes: ['node']
|
||||
itemTypes: ['node'],
|
||||
});
|
||||
|
||||
|
||||
const graph = new G6.Graph({
|
||||
//... Other configurations
|
||||
plugins: [tooltip], // Use Tooltip plugin
|
||||
@ -451,7 +445,7 @@ const fisheye = new G6.Fisheye({
|
||||
d: 1.5,
|
||||
r: 300,
|
||||
delegateStyle: clone(lensDelegateStyle),
|
||||
showLabel: false
|
||||
showLabel: false,
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -503,9 +497,9 @@ filterLens.updateParams({
|
||||
const filterLens = new G6.EdgeFilterLens({
|
||||
trigger: 'mousemove',
|
||||
r: 300,
|
||||
shouldShow: d => {
|
||||
shouldShow: (d) => {
|
||||
return d.size > 10;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -513,6 +507,7 @@ const graph = new G6.Graph({
|
||||
plugins: [filterLens], // configuring edge filter lens plugin
|
||||
});
|
||||
```
|
||||
|
||||
## TimeBar
|
||||
|
||||
There are three types of built-in TimeBar in G6:
|
||||
@ -532,7 +527,7 @@ All the three types of timebar supports play, fast forward, and fast backward.
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*kHRkQpnvBmwAAAAAAAAAAAAAARQnAQ' width='500' />
|
||||
<br />Time bar with descrete ticks<br />
|
||||
|
||||
<br />Refer to the demos [HERE](https://g6.antv.antgroup.com/en/examples/tool/timebar#timebar)<br />
|
||||
<br />Refer to the demos [HERE](https://g6-v4.antv.vision/en/examples/tool/timebar#timebar)<br />
|
||||
|
||||
### Common Usage
|
||||
|
||||
@ -578,14 +573,14 @@ const timebar = new G6.TimeBar({
|
||||
data: timeBarData,
|
||||
width,
|
||||
height: 42,
|
||||
tickLabelFormatter: d => {
|
||||
tickLabelFormatter: (d) => {
|
||||
const dateStr = `${d.date}`;
|
||||
if ((count - 1) % 10 === 0) {
|
||||
return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
tooltipFomatter: d => {
|
||||
tooltipFomatter: (d) => {
|
||||
const dateStr = `${d}`;
|
||||
return `${dateStr.substr(0, 4)}-${dateStr.substr(4, 2)}-${dateStr.substr(6, 2)}`;
|
||||
},
|
||||
@ -595,16 +590,15 @@ const timebar = new G6.TimeBar({
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*n6ECQ7Jn5pQAAAAAAAAAAAAAARQnAQ' width='600' />
|
||||
|
||||
|
||||
### Event Listener
|
||||
|
||||
TimeBar Plugin exposes several timing events. They could be listened by `graph.on('eventname', e => {})`.
|
||||
|
||||
| Event Name | Description |
|
||||
| --- | --- |
|
||||
| valuechange | Emitted when the value range of the timebar is chaged. |
|
||||
| timebarstartplay | Emitted when the timeline starts to play. |
|
||||
| timebarendplay | Emitted when the timeline ends playing. |
|
||||
| Event Name | Description |
|
||||
| ---------------- | ------------------------------------------------------ |
|
||||
| valuechange | Emitted when the value range of the timebar is chaged. |
|
||||
| timebarstartplay | Emitted when the timeline starts to play. |
|
||||
| timebarendplay | Emitted when the timeline ends playing. |
|
||||
|
||||
### Definition of the Configurations
|
||||
|
||||
@ -664,7 +658,7 @@ interface TimeBarConfig extends IPluginBaseConfig {
|
||||
#### The Parameters of the Interfaces
|
||||
|
||||
| Name | Type | Default Value | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| container | HTMLDivElement | null | The DOM container of the TimeBar. By default, the plugin will create a container DOM with 'g6-component-timebar' as className |
|
||||
| x | number | 0 | The beginning x position of the TimeBar plugin |
|
||||
| y | number | 0 | The beginning y position of the TimeBar plugin |
|
||||
@ -713,7 +707,7 @@ interface TrendConfig {
|
||||
#### Parameters of the TrendConfig
|
||||
|
||||
| Name | Type | Default Value | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| x | number | 0 | The beginning x position of the trend line chart |
|
||||
| y | number | 0 | The beginning y position of the trend line chart |
|
||||
| width | number | The width of the TimeBar | The width of the trend line chart of the TimeBar, we suggest to use the default value. If you wanna custom it, please assign the `width` of the slider in the same time |
|
||||
@ -722,7 +716,7 @@ interface TrendConfig {
|
||||
| isArea | boolean | false | Whether to show a area chart instead |
|
||||
| lineStyle | ShapeStyle | null | The configurations for the style of the line in the line chart |
|
||||
| areaStyle | ShapeStyle | null | The configuration for the style of the area in the chart when `isArea` is `true` |
|
||||
| interval | Interval | null | The configuration for the style of the bars in the chart. When it is assigned, a mixed trend chart will take place. `Interval = { data: number[], style: ShapeStyle }`. Except the configurations in `ShapeStyle` for the style of the shapes in the bar charts, `barWidth` for the width of one bar is also configurable for `style` |
|
||||
| interval | Interval | null | The configuration for the style of the bars in the chart. When it is assigned, a mixed trend chart will take place. `Interval = { data: number[], style: ShapeStyle }`. Except the configurations in `ShapeStyle` for the style of the shapes in the bar charts, `barWidth` for the width of one bar is also configurable for `style` |
|
||||
|
||||
#### Interfaces of SliderOption
|
||||
|
||||
|
||||
@ -5,8 +5,8 @@ order: 0
|
||||
|
||||
G6 中支持插件提供了一些可插拔的组件，包括：
|
||||
|
||||
- [Legend](#legend) *v4.3.0 起支持*
|
||||
- [SnapLine](#snapline) *v4.3.0 起支持*
|
||||
- [Legend](#legend) _v4.3.0 起支持_
|
||||
- [SnapLine](#snapline) _v4.3.0 起支持_
|
||||
- [Grid](#grid)
|
||||
- [Minimap](#minimap)
|
||||
- [ImageMinimap](#image-minimap)
|
||||
@ -34,7 +34,7 @@ const graph = new G6.Graph({
|
||||
|
||||
## Legend
|
||||
|
||||
Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和边所代表的含义，并可以通过与图例的交互做简单的高亮和过滤。 *v4.3.0 起支持*。
|
||||
Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和边所代表的含义，并可以通过与图例的交互做简单的高亮和过滤。 _v4.3.0 起支持_。
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UmXzQLG65vYAAAAAAAAAAAAAARQnAQ' alt="img" width='500px'>
|
||||
|
||||
@ -63,22 +63,22 @@ Legend 是 G6 内置的图例插件。用于说明图中不同类型的节点和
|
||||
| filter.enable | boolean | 是否允许通过图例的交互对主图元素过滤，默认为 `false` |
|
||||
| filter.multiple | boolean | 是否支持多种元素过滤，默认为 `false`，只有 `filter.trigger` 为 `'click'` 时方可多选图例 |
|
||||
| filter.trigger | 'click' / 'mouseenter' | 触发主图元素过滤的图例交互方式，默认为 `click` |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | 在过滤时，图例本身的状态样式，包括 `filter.legendStateStyles.active` 和 `filter.legendStateStyles.inactive` 两种，每种的类型均为 ShapeStyle。类似图的 `nodeStateStyles` 配置 |
|
||||
| filter.legendStateStyles | { active?: ShapeStyle, inactive?: ShapeStyle | 在过滤时，图例本身的状态样式，包括 `filter.legendStateStyles.active` 和 `filter.legendStateStyles.inactive` 两种，每种的类型均为 ShapeStyle。类似图的 `nodeStateStyles` 配置 |
|
||||
| filter.graphActiveState | string | 主图元素过滤时，被选中的主图元素的状态名，将寻找主图元素的对应的状态样式进行主图元素的更新。默认值为 `'active'` |
|
||||
| filter.graphInactiveState | string | 主图元素过滤时，未被选中的主图元素的状态名，将寻找主图元素的对应的状态样式进行主图元素的更新。默认值为 `'inactive'` |
|
||||
| filter.filterFunctions | { [key: string]: (d) => boolean; } | 由于图例的数据与主图解耦，因此需要配置每种图例对应的主图过滤函数，`key` 为图例数据的 `type`，值为函数，函数的参数为主图元素的数据，返回值为布尔型，代表是否被选中 |
|
||||
|
||||
## SnapLine
|
||||
|
||||
SnapLine 是 G6 内置的对齐线插件。 *v4.3.0 起支持*。
|
||||
SnapLine 是 G6 内置的对齐线插件。 _v4.3.0 起支持_。
|
||||
|
||||
实例化时可以通过配置项调整 SnapLine 的样式和功能。
|
||||
|
||||
### 配置项
|
||||
|
||||
| 名称 | 类型 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| line | ShapeStyle | 辅助线的样式 |
|
||||
| 名称 | 类型 | 描述 |
|
||||
| ------------- | --------------------------------------------- | ------------------------- |
|
||||
| line | ShapeStyle | 辅助线的样式 |
|
||||
| itemAlignType | boolean、'horizontal' 、'vertical'、'center'; | 辅助线类型，true 表示全部 |
|
||||
|
||||
## Grid
|
||||
@ -106,7 +106,7 @@ Minimap 是用于快速预览和探索图的工具。
|
||||
### 配置项
|
||||
|
||||
| 名称 | 类型 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| --- | --- | --- | --- |
|
||||
| container | Object | 放置 Minimap 的 DOM 容器。若不指定则自动生成 |
|
||||
| className | String | 生成的 DOM 元素的 className |
|
||||
| viewportClassName | String | Minimap 上视窗 DOM 元素的 className |
|
||||
@ -228,7 +228,7 @@ Menu 用于配置节点上的右键菜单。
|
||||
| offsetX | number | 6 | menu 的 x 方向偏移值，需要考虑父级容器的 padding |
|
||||
| offsetY | number | 6 | menu 的 y 方向偏移值，需要考虑父级容器的 padding |
|
||||
| itemTypes | string[] | ['node', 'edge', 'combo'] | menu 作用在哪些类型的元素上，若只想在节点上显示，可将其设置为 ['node'] |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | menu 出现的触发方式，默认为 `'contextmenu'`，即右击。`'click'` 代表左击。*v4.3.2 起支持 'click'* |
|
||||
| trigger | 'click' / 'contextmenu' | 'contextmenu' | menu 出现的触发方式，默认为 `'contextmenu'`，即右击。`'click'` 代表左击。_v4.3.2 起支持 'click'_ |
|
||||
|
||||
### 用法
|
||||
|
||||
@ -259,11 +259,11 @@ const menu = new G6.Menu({
|
||||
<li>测试01</li>
|
||||
<li>测试01</li>
|
||||
<li>测试01</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleMenuClick(target, item, graph) {
|
||||
console.log(target, item, graph)
|
||||
console.log(target, item, graph);
|
||||
},
|
||||
});
|
||||
|
||||
@ -287,7 +287,7 @@ const menu = new G6.Menu({
|
||||
</ul>`;
|
||||
},
|
||||
handleMenuClick(target, item) {
|
||||
console.log(target, item)
|
||||
console.log(target, item);
|
||||
},
|
||||
});
|
||||
|
||||
@ -348,7 +348,7 @@ const toolbar = new G6.ToolBar({
|
||||
<li code='add'>增加节点</li>
|
||||
<li code='undo'>撤销</li>
|
||||
</ul>
|
||||
`
|
||||
`;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
if (code === 'add') {
|
||||
@ -356,12 +356,12 @@ const toolbar = new G6.ToolBar({
|
||||
id: 'node2',
|
||||
label: 'node2',
|
||||
x: 300,
|
||||
y: 150
|
||||
})
|
||||
y: 150,
|
||||
});
|
||||
} else if (code === 'undo') {
|
||||
toolbar.undo()
|
||||
toolbar.undo();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -383,12 +383,10 @@ const toolbar = new G6.ToolBar({
|
||||
<li>测试03</li>
|
||||
<li>测试04</li>
|
||||
<li>测试05</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
handleClick: (code, graph) => {
|
||||
|
||||
}
|
||||
handleClick: (code, graph) => {},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -430,10 +428,10 @@ const tooltip = new G6.Tooltip({
|
||||
<h4>自定义tooltip</h4>
|
||||
<ul>
|
||||
<li>Label: ${e.item.getModel().label || e.item.getModel().id}</li>
|
||||
</ul>`
|
||||
return outDiv
|
||||
</ul>`;
|
||||
return outDiv;
|
||||
},
|
||||
itemTypes: ['node']
|
||||
itemTypes: ['node'],
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -514,7 +512,7 @@ const fisheye = new G6.Fisheye({
|
||||
d: 1.5,
|
||||
r: 300,
|
||||
delegateStyle: clone(lensDelegateStyle),
|
||||
showLabel: false
|
||||
showLabel: false,
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -566,9 +564,9 @@ filterLens.updateParams({
|
||||
const filterLens = new G6.EdgeFilterLens({
|
||||
trigger: 'mousemove',
|
||||
r: 300,
|
||||
shouldShow: d => {
|
||||
shouldShow: (d) => {
|
||||
return d.size > 10;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const graph = new G6.Graph({
|
||||
@ -600,7 +598,7 @@ const graph = new G6.Graph({
|
||||
|
||||
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*17VoSoTm9o8AAAAAAAAAAAAAARQnAQ' width='500' />
|
||||
|
||||
<br />虽然 G6 提供了各种不同类型的 TimeBar 组件，但在使用的方式却非常简单，通过配置字段就可以进行区分。<br /> <br />关于 TimeBar 的使用案例，请参考[这里](https://g6.antv.antgroup.com/examples/tool/timebar#timebar)。<br />
|
||||
<br />虽然 G6 提供了各种不同类型的 TimeBar 组件，但在使用的方式却非常简单，通过配置字段就可以进行区分。<br /> <br />关于 TimeBar 的使用案例，请参考[这里](https://g6-v4.antv.vision/examples/tool/timebar#timebar)。<br />
|
||||
|
||||
### 使用 TimeBar 组件
|
||||
|
||||
@ -667,11 +665,11 @@ const timebar = new G6.TimeBar({
|
||||
|
||||
TimeBar 插件暴露除了几个时机事件，方便用户监听内部状态的变化。以下事件可通过 `graph.on('eventname', e => {})` 进行监听。
|
||||
|
||||
| 事件名称 | 描述 |
|
||||
| --- | --- |
|
||||
| valuechange | 时间轴的时间范围发生变化时触发 |
|
||||
| timebarstartplay | 时间轴开始播放时触发 |
|
||||
| timebarendplay | 时间轴播放结束时触发 |
|
||||
| 事件名称 | 描述 |
|
||||
| ---------------- | ------------------------------ |
|
||||
| valuechange | 时间轴的时间范围发生变化时触发 |
|
||||
| timebarstartplay | 时间轴开始播放时触发 |
|
||||
| timebarendplay | 时间轴播放结束时触发 |
|
||||
|
||||
### 参数定义
|
||||
|
||||
@ -730,7 +728,7 @@ interface TimeBarConfig extends IPluginBaseConfig {
|
||||
#### 接口参数说明
|
||||
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| container | HTMLDivElement | null | TimeBar 容器，如果不设置，则默认创建 className 为 g6-component-timebar 的 DOM 容器 |
|
||||
| x | number | 0 | TimeBar 开始 x 坐标 |
|
||||
| y | number | 0 | TimeBar 开始 y 坐标 |
|
||||
@ -879,7 +877,6 @@ export interface TimeBarSliceOption {
|
||||
| tickLabelFormatter | Function | null | 刻度的格式化回调函数 |
|
||||
| tooltipFomatter | Function | null | tooltip 上内容格式化的回调函数 |
|
||||
|
||||
|
||||
#### TickCfg 接口定义
|
||||
|
||||
```javascript
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
"relational data",
|
||||
"site"
|
||||
],
|
||||
"homepage": "https://g6.antv.antgroup.com",
|
||||
"homepage": "https://g6-v4.antv.vision",
|
||||
"bugs": {
|
||||
"url": "https://github.com/antvis/g6/issues"
|
||||
},
|
||||
@ -46,7 +46,7 @@
|
||||
"@antv/util": "^2.0.9",
|
||||
"@antv/vis-predict-engine": "^0.1.1",
|
||||
"@microsoft/api-extractor": "^7.33.6",
|
||||
"dumi": "^2.2.14",
|
||||
"dumi": "2.2.14",
|
||||
"g6v5": "npm:@antv/g6@5.0.0-alpha.9",
|
||||
"insert-css": "^2.0.0",
|
||||
"react-i18next": "^11.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user