mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 10:48:24 +08:00
docs: add Graph Config
This commit is contained in:
claude
Yanyan Wang
parent
9ea27040e7
commit
21bf603084
192
docs/api/G6/GraphConfig.en.md
Normal file
192
docs/api/G6/GraphConfig.en.md
Normal file
@ -0,0 +1,192 @@
|
||||
---
|
||||
title: G6.Graph Configurations
|
||||
order: 1
|
||||
redirect_from:
|
||||
- /en/docs/api
|
||||
---
|
||||
|
||||
## container
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| string | HTMLElement | The DOM container of graph, it can be the id of a DOM element or the an HTML node. |
|
||||
|
||||
## width
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Number | undefined | The width of the canvas for graph with the unit 'px'. |
|
||||
|
||||
## height
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Number | undefined | The height of the canvas for graph with the unit 'px'. |
|
||||
|
||||
## fitView
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Boolean | false | Whether to fit the canvas to the view port. |
|
||||
|
||||
## fitViewPadding
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Number | Takes effect only when `fitView: true`. It is the padding between canvas and the border of view port.<br />- It can be a value, e.g. `fitViewPadding: 20`, which means the padding to the top, left, right, bottom are the same.<br />- Or an array, e.g. `fitViewPadding: [ 20, 40, 50, 20 ]`, the four values in the array indicate the padding to the top, right, bottom, left respectively. |
|
||||
|
||||
## fitCenter
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Boolean | false | *Supported by v3.5.1.* Whether to translate the graph to align its center with the canvas. Its priority is lower than `fitView` |
|
||||
|
||||
## linkCenter
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Boolean | false | Whether to connect the edges to nodes' center. |
|
||||
|
||||
## groupByTypes
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Boolean | true | Whether to group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. When you are using Combo, **MUST** set `groupByTypes` to `false` |
|
||||
|
||||
## autoPaint
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Boolean | true | Whether to paint the graph automatically while item updated or view port changed. In order to enhance the performance, we recommend to turn off `antoPaint` when you are doing bulk operation on nodes or edges. This can be refered to [`setAutoPaint()`](#setautopaintauto). |
|
||||
|
||||
## modes
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | | The interaction modes of this graph. Please refer to [Interaction Mode](/en/docs/manual/middle/states/mode) for detail。 |
|
||||
|
||||
### modes.default
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Array | | The default modes of this graph. Please refer to [Default Behavior](/zh/docs/manual/middle/states/defaultBehavior) for detail. |
|
||||
|
||||
## nodeStateStyles
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | The node styles on different states, e.g. hover, selected. It is a new feature of G6 3.1. |
|
||||
|
||||
## edgeStateStyles
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | The edge styles on different states, e.g. hover, selected. It is a new feature of G6 3.1. |
|
||||
|
||||
## comboStateStyles
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | The combo styles on different states, e.g. hover, selected. It is a new feature of G6 3.5. |
|
||||
|
||||
## defaultNode
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | Default node configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data. |
|
||||
|
||||
## defaultEdge
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | Default edge configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data. |
|
||||
|
||||
## defaultCombo
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | Default combo configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data. It is a new feature of G6 3.5. |
|
||||
|
||||
## plugins
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Array | [] | Plugins for graph. Please refer to [Plugin](/en/docs/manual/tutorial/plugins##plugin) for detail. |
|
||||
|
||||
## animate
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Boolean | false | Wheter activate the global animation. Which will take effect while changing layouts, changing data, and other global operations. |
|
||||
|
||||
## animateCfg
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | | The configurations for global animation. Takes effect only when `animate: true`. For more detail about animateCfg, see [Basic Animation Docs](/en/docs/manual/advanced/animation#animatecfg). |
|
||||
|
||||
## animateCfg.onFrame
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Function | null | The callback function for every frame of animation. The path of custom animation for node can be defined here. The nodes will move linearly when `onFrame` is null. |
|
||||
|
||||
## animateCfg.duration
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Number | 500 | Duration of animation with unit millisecond. |
|
||||
|
||||
## animateCfg.easing
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| string | easeLinear | The easing function name of animation. Please refer to ease in d3. |
|
||||
|
||||
## minZoom
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Number | 0.2 | The minimum zoom ratio. |
|
||||
|
||||
## maxZoom
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Number | 10 | The maximum zoom ratio. |
|
||||
|
||||
## groupType
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| string | circle | Group type for nodes. Options: `'circle'` or `'rect'`. |
|
||||
|
||||
## groupStyle
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | | Group style for nodes, please refer to [Node Group](/en/docs/manual/middle/nodeGroup) for detail. |
|
||||
|
||||
## layout
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| Object | | Configurations for layout. The `type` in it is the name of layout method with the options: `'random'`, `'radial'`, `'mds'`, `'circular'`, `'fruchterman'`, `'force'`, `'dagre'`, `'concentric'`, `'grid'`. For more configurations for different layout methods, please refer to [Layout API](/en/docs/api/Layout/Layout). |
|
||||
|
||||
## renderer
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| string | 'canvas' / 'svg' | Render the graph with Canvas or SVG. It is supported expecting V3.3.x |
|
||||
|
||||
## enabledStack
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| boolean | false | Whether to enable stack，that is, whether to support redo & undo operation. Support by V3.6 and latter versions. |
|
||||
|
||||
## maxStep
|
||||
|
||||
| Type | Default | Description |
|
||||
| --- | --- | --- |
|
||||
| number | 10 | The max step number of redo & undo, works only when the `enabledStack` is `true`. Support by V3.6 and latter versions. |
|
||||
190
docs/api/G6/GraphConfig.zh.md
Normal file
190
docs/api/G6/GraphConfig.zh.md
Normal file
@ -0,0 +1,190 @@
|
||||
---
|
||||
title: G6.Graph 属性列表
|
||||
order: 0
|
||||
---
|
||||
|
||||
## container
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| string | HTMLElement | 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。 |
|
||||
|
||||
## width
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | --------- | --------------------------- |
|
||||
| Number | undefined | 指定画布宽度，单位为 'px'。 |
|
||||
|
||||
## height
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | --------- | --------------------------- |
|
||||
| Number | undefined | 指定画布高度，单位为 'px'。 |
|
||||
|
||||
## fitView
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------- | ------ | ---------------------------------------------- |
|
||||
| Boolean | false | 是否开启画布自适应。开启后图自动适配画布大小。 |
|
||||
|
||||
## fitViewPadding
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Array | Number | `fitView` 为 `true` 时生效。图适应画布时，指定四周的留白。<br />- 可以是一个值, 例如：`fitViewPadding: 20`<br />- 也可以是一个数组，例如：`fitViewPadding: [ 20, 40, 50, 20 ]`<br />当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。 |
|
||||
|
||||
## fitCenter
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Boolean | false | *v3.5.1 后支持。*开启后，图将会被平移，图的中心将对齐到画布中心，但不缩放。优先级低于 fitView |
|
||||
|
||||
## linkCenter
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------- | ------ | ------------------------ |
|
||||
| Boolean | false | 指定边是否连入节点的中心 |
|
||||
|
||||
## groupByTypes
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。当使用 Combo 时，**必须**将其设置为 `false` |
|
||||
|
||||
## autoPaint
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Boolean | true | 当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。 |
|
||||
|
||||
## modes
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Object | | 设置画布的模式。详情可见 [交互模式 Mode](/zh/docs/manual/middle/states/mode) 文档。 |
|
||||
|
||||
### modes.default
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Array | | 画布默认的模式。详情可参见 [内置的 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 文档. |
|
||||
|
||||
## nodeStateStyles
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| Object | {} | 各个状态下节点的样式，例如 `hover`、`selected`，3.1 版本新增。 |
|
||||
|
||||
## edgeStateStyles
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | {} | 各个状态下边的样式，例如 `hover`、`selected`，3.1 版本新增。 |
|
||||
|
||||
## comboStateStyles
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | {} | 各个状态下 Combo 的样式，例如 `hover`、`selected`，3.5 版本新增。 |
|
||||
|
||||
## defaultNode
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | {} | 默认状态下节点的配置，比如 `type`, `size`, `color`。会被写入的 data 覆盖。 |
|
||||
|
||||
## defaultEdge
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | {} | 默认状态下边的配置，比如 `type`, `size`, `color`。会被写入的 data 覆盖。 |
|
||||
|
||||
## defaultCombo
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | {} | 默认状态下 Combo 的配置，比如 `type`, `color`。会被写入的 data 覆盖。3.5 版本新增。 |
|
||||
|
||||
## plugins
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Array | [] | 向 graph 注册插件。插件机制请见：[插件](/zh/docs/manual/tutorial/plugins#插件) |
|
||||
|
||||
## animate
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Boolean | false | 是否启用全局动画。 |
|
||||
|
||||
## animateCfg
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | | 动画配置项，仅在 `animate` 为 `true` 时有效。关于 `animateCfg` 的更多配置项参见[基础动画教程](/zh/docs/manual/advanced/animation#animatecfg)。 |
|
||||
|
||||
### animateCfg.onFrame
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Function | null | 回调函数，用于自定义节点运动路径，为空时线性运动。 |
|
||||
|
||||
### animateCfg.duration
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Number | 500 | 动画时长，单位为毫秒。 |
|
||||
|
||||
### animateCfg.easing
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| string | easeLinear | 动画动效，可参见 d3 ease。 |
|
||||
|
||||
## minZoom
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Number | 0.2 | 最小缩放比例 |
|
||||
|
||||
## maxZoom
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Number | 10 | 最大缩放比例 |
|
||||
|
||||
## groupType
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| string | circle | 节点分组类型，支持 circle 和 rect |
|
||||
|
||||
## groupStyle
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| Object | | groupStyle 用于指定分组的样式，详情参看 [节点分组 Group](/zh/docs/manual/middle/nodeGroup) 教程 |
|
||||
|
||||
## layout
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------------ | ------------------------------------------------------------ |
|
||||
| Object | | 布局配置项，使用 type 字段指定使用的布局方式，type 可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 [Layout API 文档](/zh/docs/api/G6/Layout/Layout) |
|
||||
|
||||
## renderer
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| string | 'canvas' / 'svg' | 渲染方式，该配置项除 V3.3.x 外其他版本均支持。 |
|
||||
|
||||
## enabledStack
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| ------ | ------ | ------------------------------------------------------------ |
|
||||
| boolean | false | 是否启用 stack，即是否开启 redo & undo 功能，该配置项 V3.6 及以上版本支持。 |
|
||||
|
||||
## maxStep
|
||||
|
||||
| 类型 | 默认值 | 描述 |
|
||||
| --- | --- | --- | --- |
|
||||
| maxStep | number | 10 | redo & undo 最大步数, 只有当 enabledStack 为 true 时才起作用，该配置项 V3.6 及以上版本支持。 |
|
||||
2026
docs/api/G6/GraphMethod.en.md
Normal file
2026
docs/api/G6/GraphMethod.en.md
Normal file
File diff suppressed because it is too large
Load Diff
1990
docs/api/G6/GraphMethod.zh.md
Normal file
1990
docs/api/G6/GraphMethod.zh.md
Normal file
File diff suppressed because it is too large
Load Diff
@ -35,7 +35,7 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
{
|
||||
slug: 'docs/api/Graph',
|
||||
slug: 'docs/api/G6/Graph',
|
||||
title: {
|
||||
zh: 'API',
|
||||
en: 'API',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user