diff --git a/docs/api/Behavior.en.md b/docs/api/Behavior.en.md index 82a605b649..188a7fd11a 100644 --- a/docs/api/Behavior.en.md +++ b/docs/api/Behavior.en.md @@ -7,6 +7,8 @@ Behavior is the compound interactions in G6. In general, a Behavior includes one By default, Behavior has three callbacks: `shouldBegin`, `shouldUpdate`, and `shouldEnd`, representing the beginning of the behavior, whether to update the items, the ending of the behavior respectively. If they return `false`, the default behavior will be prevented. +This document is going to introduce how to customize a behavior. The infomation about the built-in behaviors can be found in the [Built-in Behaviors](/en/docs/manual/middle/states/defaultBehavior). + ## Usage ```javascript diff --git a/docs/api/Behavior.zh.md b/docs/api/Behavior.zh.md index 7381637dbf..943753c99c 100644 --- a/docs/api/Behavior.zh.md +++ b/docs/api/Behavior.zh.md @@ -7,7 +7,9 @@ Behavior 指 G6 中的复合交互，一般 Behavior 包含一个或多个事件 Behavior 默认包含 `shouldBegin`，`shouldUpdate`，`shouldEnd` 三个回调，代表是否开始行为，是否更新元素，是否进行结束行为，当返回值为 `false` 时阻止默认行为。 -## 用法 +本文将介绍如何自定义 Behavior。所有内置 Behavior 及其参数参见 [内置的 Behavior 教程](/zh/docs/manual/middle/states/defaultBehavior)。 + +## 自定义 Behavior ```javascript G6.registerBehavior('behaviorName', { diff --git a/docs/api/Custom.en.md b/docs/api/Custom.en.md index 4aa0c2391c..153b983248 100644 --- a/docs/api/Custom.en.md +++ b/docs/api/Custom.en.md @@ -192,7 +192,7 @@ G6.registerCombo( ## G6.registerBehavior(behaviorName, behavior) -When the built-in Behaviors cannot satisfy your requirments, custom a type of Behavior by `G6.registerBehavior(behaviorName, behavior)`. +When the [built-in Behaviors](/en/docs/manual/middle/states/defaultBehavior) cannot satisfy your requirments, custom a type of Behavior by `G6.registerBehavior(behaviorName, behavior)`. See [Behavior API](/en/docs/api/Behavior) for detail. ### Parameters diff --git a/docs/api/Custom.zh.md b/docs/api/Custom.zh.md index b016b7a245..d78b99325c 100644 --- a/docs/api/Custom.zh.md +++ b/docs/api/Custom.zh.md @@ -193,7 +193,7 @@ G6.registerNode( ## G6.registerBehavior(behaviorName, behavior) -当内置的 Behavior 不能满足需求时，使用 `registerBehavior(behaviorName, behavior)` 方法注册自定义的交互行为。 +当 [内置 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 不能满足需求时，使用 `registerBehavior(behaviorName, behavior)` 方法注册自定义的交互行为。详见 [Behavior API](/zh/docs/api/Behavior)。 ### 参数 diff --git a/docs/api/nodeEdge/Combo.en.md b/docs/api/nodeEdge/Combo.en.md index c51780a2dc..0e4488883c 100644 --- a/docs/api/nodeEdge/Combo.en.md +++ b/docs/api/nodeEdge/Combo.en.md @@ -3,7 +3,7 @@ title: Combo order: 3 --- -Combo inherits from Node. The functions of Node are also available for Combo. +Combo inherits from Node. The functions of Node are also available for Combo. This document will only introduce the common functions for Combo Class. All the built-in combos can be found in [Built-in Combos Doc](/en/docs/manual/middle/elements/combos/defaultCombo) and [demo](/en/examples/item/defaultCombos), Custom Combo can be found in [Custom Combo Doc](/en/docs/manual/advanced/custom-combo) and [demo](/en/examples/item/customCombo). ### getChildren() Get all children including sub nodes and sub combos. diff --git a/docs/api/nodeEdge/Combo.zh.md b/docs/api/nodeEdge/Combo.zh.md index 6e3a5e857d..de80402615 100644 --- a/docs/api/nodeEdge/Combo.zh.md +++ b/docs/api/nodeEdge/Combo.zh.md @@ -3,7 +3,7 @@ title: Combo order: 3 --- -Combo 继承自 Node，具有 Node 的所有特性。 +Combo 继承自 Node，具有 Node 的所有特性。本文仅介绍 Combo 类的通用方法，内置节点见 [内置 Combo 文档](/zh/docs/manual/middle/elements/combos/defaultCombo) 和 [demo](/zh/examples/item/defaultCombos)，自定义节点见 [自定义 Combo 文档](/zh/docs/manual/advanced/custom-combo) 和 [demo](/zh/examples/item/customCombo)。 ### getChildren() 获取 Combo 中所有的子元素，包括 Combo 和 Node。 diff --git a/docs/api/nodeEdge/Edge.en.md b/docs/api/nodeEdge/Edge.en.md index e30ce67276..df2d246642 100644 --- a/docs/api/nodeEdge/Edge.en.md +++ b/docs/api/nodeEdge/Edge.en.md @@ -3,7 +3,7 @@ title: Edge order: 2 --- -Edge inherits from item. The functions of Item are also available for Edge. +Edge inherits from item. The functions of Item are also available for Edge. This document will only introduce the common functions for Edge class. All the built-in edges can be found in [Built-in Edges Doc](/en/docs/manual/middle/elements/edges/defaultEdge) and [demo](/en/examples/item/defaultEdges), Custom Edge can be found in [Custom Edge Doc](/en/docs/manual/advanced/custom-edge) and [demo](/en/examples/item/customEdge). ## setSource(source) diff --git a/docs/api/nodeEdge/Edge.zh.md b/docs/api/nodeEdge/Edge.zh.md index 4fcd94d835..bd798e3f96 100644 --- a/docs/api/nodeEdge/Edge.zh.md +++ b/docs/api/nodeEdge/Edge.zh.md @@ -3,7 +3,7 @@ title: Edge order: 2 --- -Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。 +Edge 继承自 Item。所以 Item 的方法在 Edge 实例中都可以使用。本文仅介绍 Edge 类的通用方法，内置节点见 [内置节点文档](/zh/docs/manual/middle/elements/edges/defaultEdge) 和 [demo](/zh/examples/item/defaultEdges)，自定义节点见 [自定义节点文档](/zh/docs/manual/advanced/custom-edge) 和 [demo](/zh/examples/item/customEdge)。 ## setSource(source) diff --git a/docs/api/nodeEdge/Node.en.md b/docs/api/nodeEdge/Node.en.md index 52c157558e..6ffd51fce9 100644 --- a/docs/api/nodeEdge/Node.en.md +++ b/docs/api/nodeEdge/Node.en.md @@ -3,7 +3,7 @@ title: Node order: 1 --- -Node inherits from item. The functions of Item are also available for Node. +Node inherits from item. The functions of Item are also available for Node. This document will only introduce the common functions for Node class. All the built-in nodes can be found in [Built-in Nodes Doc](/en/docs/manual/middle/elements/nodes/defaultNode) and [demo](/en/examples/item/defaultNodes), Custom Node can be found in [Custom Node Doc](/en/docs/manual/advanced/custom-node) and [demo](/en/examples/item/customNode). ## lock() diff --git a/docs/api/nodeEdge/Node.zh.md b/docs/api/nodeEdge/Node.zh.md index 4dcf444955..fe848df609 100644 --- a/docs/api/nodeEdge/Node.zh.md +++ b/docs/api/nodeEdge/Node.zh.md @@ -3,7 +3,7 @@ title: Node order: 1 --- -Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。 +Node 继承自 Item。所以 Item 上面的方法在 Node 实例中都可以调用。本文仅介绍 Node 类的通用方法，内置节点见 [内置节点文档](/zh/docs/manual/middle/elements/nodes/defaultNode) 和 [demo](/zh/examples/item/defaultNodes)，自定义节点见 [自定义节点文档](/zh/docs/manual/advanced/custom-node) 和 [demo](/zh/examples/item/customNode)。 ## lock() diff --git a/docs/api/itemProperties.en.md b/docs/api/nodeEdge/itemProperties.en.md similarity index 100% rename from docs/api/itemProperties.en.md rename to docs/api/nodeEdge/itemProperties.en.md diff --git a/docs/api/itemProperties.zh.md b/docs/api/nodeEdge/itemProperties.zh.md similarity index 100% rename from docs/api/itemProperties.zh.md rename to docs/api/nodeEdge/itemProperties.zh.md diff --git a/docs/api/shapeProperties.en.md b/docs/api/nodeEdge/shapeProperties.en.md similarity index 100% rename from docs/api/shapeProperties.en.md rename to docs/api/nodeEdge/shapeProperties.en.md diff --git a/docs/api/shapeProperties.zh.md b/docs/api/nodeEdge/shapeProperties.zh.md similarity index 100% rename from docs/api/shapeProperties.zh.md rename to docs/api/nodeEdge/shapeProperties.zh.md diff --git a/docs/manual/middle/states/defaultBehavior.en.md b/docs/manual/middle/states/defaultBehavior.en.md index c70d4ef179..b27ef0c82c 100644 --- a/docs/manual/middle/states/defaultBehavior.en.md +++ b/docs/manual/middle/states/defaultBehavior.en.md @@ -12,19 +12,20 @@ Behavior is the interaction mechanism in G6. It is used with [Interaction Mode]( All the basic graphics Shapes, Items(nodes/edges) can be interacted by events. To achieve it with versatility, there are 14 built-in Behaviors in G6. ### drag-combo -Supported by V3.5 or later. +Supported by V3.5 or later versions. -- Description: Allows users drag combo; -- `type: 'drag-combo'`; -- `enableDelegate`: Whether activate `delegate` when dragging combos, which means whether to use a virtual rect moved with the dragging mouse instead of the combo. The effect is shown in the figures below. `false` by default; -- `delegateStyle`: The style of the `delegate` when dragging the combo with delegate; -- `onlyChangeComboSize`: Only Change the size of Combo When dragging combos, whici means not to change the struct of combo. `false` by default; -- `activeState`: When dragging the combo, this state value of the parent combo or entered combo, that requires the use to configuration it in `comboStateStyles` when new Graph, which is empty by default;; -- `selectedState`: state name when combo selected, `selected` by default. +- Description: Allows users to drag combo; +- Configurations: + - `type: 'drag-combo'`; + - `enableDelegate`: Whether activate `delegate` when dragging combos, which means whether to use a virtual rect moved with the dragging mouse instead of the combo. The effect is shown in the figures below. `false` by default; + - `delegateStyle`: The style of the `delegate` when dragging the combo with delegate; + - `onlyChangeComboSize`: Supported by V3.5 or later vertions. Only Change the size of the prarent combo whose child combo to be dragged, which means do not change the hierarchy structures of combos and nodes. `false` by default; + - `activeState`: The state's name(string) of the entered combo to be dragged over, coordinating with the configuration in `comboStateStyles` to define the state styles when instantiating a graph. It is empty by default; + - `selectedState`: The state's name(string) when combo is selected, `'selected'` by default. **Default Configuration** -``` +```javascript const graph = new G6.Graph({ modes: { default: ['drag-combo'], @@ -32,9 +33,9 @@ const graph = new G6.Graph({ }); ``` -Set enableDelegate & activeState Configuration. +Configure the styles for enableDelegate or activeState: -``` +```javascript const graph = new G6.Graph({ modes: { default: [{ @@ -55,13 +56,14 @@ const graph = new G6.Graph({ ### collapse-expand-combo Supported by V3.5 or later. -- Description：collapse or expand Combo； -- `type: 'collapse-expand-combo'`； -- `trigger`：Specify which key to hold for collapse and expand combo. `dblclick` by default. Options: `'click'`, `'dblclick'`;。 +- Description: collapse or expand Combo; +- Configurations: + - `type: 'collapse-expand-combo'`; + - `trigger`: Specify which key to hold for collapse and expand combo. `dblclick` by default. Options: `'click'`, `'dblclick'`. **Default Configuration** -``` +```javascript const graph = new G6.Graph({ modes: { default: ['collapse-expand-combo'], @@ -69,9 +71,9 @@ const graph = new G6.Graph({ }); ``` -User can be configuration to click to collapse or expand： +Configure the trigger to be 'click': -``` +```javascript const graph = new G6.Graph({ modes: { default: [{ @@ -82,25 +84,13 @@ const graph = new G6.Graph({ }); ``` -users can customize the interactive way of displaying or collapsing in the following ways: - -``` -// by ComboId -graph.collapseExpandCombo(comboId); - -if (graph.get('layout')) { - graph.layout() -} else { - graph.refreshPositions() -} -``` - ### drag-canvas - Description: Allows users drag canvas; -- `type: 'drag-canvas'`; -- `direction`: The direction of dragging that is allowed. Options: `'x'`, `'y'`, `'both'`. `'both'` by default. +- Configurations: + - `type: 'drag-canvas'`; + - `direction`: The direction of dragging that is allowed. Options: `'x'`, `'y'`, `'both'`. `'both'` by default. **Default Configuration** @@ -134,21 +124,23 @@ The canvas can be dragged along x direction only.
img -**Conflict Configuration：** +**Conflict Configuration: ** ```javascript const graph = new G6.Graph({ @@ -389,8 +388,8 @@ It is a solution to put these two conflicting events into two mdoes. They will b - Description: Collapse or expand a subtree on a treeGraph; - Attension: If you want to collapse a subtree by default when render the Graph in the first time, you can assign `collapsed: true` to the root of the subtree in its data. If you want to control the subtree to collapse/expand by code, you can also assign the `collapsed` for the root of the subtree and call `treeGraph.layout()` to make it take effect; -- `type: 'collapse-expand'`; -- Configuration: +- Configurations: + - `type: 'collapse-expand'`; - `trigger`: The operation for collapsing and expanding. Options: `click` and `dblclick`. `click` by default; - `onChange`: The callback function after collapsing or expanding. **Warining**: it will be removed from V3.1.2. @@ -419,9 +418,9 @@ const graph = new G6.TreeGraph({ ### collapse-expand-group - Description: Collapse or expand a node group; -- `type: 'collapse-expand-group'` - Configurations: - - trigger: The operation for collapsing and expanding. Options: `click` and `dblclick`. `dblclick` by default, which means double click. + - `type: 'collapse-expand-group'` + - `trigger`: The operation for collapsing and expanding. Options: `click` and `dblclick`. `dblclick` by default, which means double click. **Default Configuration** @@ -453,8 +452,8 @@ const graph = new G6.Graph({ ### drag-group - Description: Allows users drag node group; -- `type: 'drag-group'`; -- Configuration: +- Configurations: + - `type: 'drag-group'`; - `delegateStyle`: The style of the `delegate` when dragging the group. **Default Configuration** @@ -470,8 +469,8 @@ const graph = new G6.Graph({ ### drag-node-with-group - Description: Allow users to drag the nodes in the group; -- `type: 'drag-node-with-group'`; -- Configuration: +- Configurations: + - `type: 'drag-node-with-group'`; - `delegateStyle`: The style of the `delegate` when dragging the node. - `maxMultiple`; - `minMultiple`. diff --git a/docs/manual/middle/states/defaultBehavior.zh.md b/docs/manual/middle/states/defaultBehavior.zh.md index b73cf42486..6f4a418332 100644 --- a/docs/manual/middle/states/defaultBehavior.zh.md +++ b/docs/manual/middle/states/defaultBehavior.zh.md @@ -15,16 +15,17 @@ Behavior 是 G6 提供的定义图上交互事件的机制。它与[交互模式 V3.5 以上版本支持。 - 含义：拖动 Combo； -- `type: 'drag-combo'`； -- `enableDelegate`：拖动 Combo 时候是否开启图形代理 delegate，即拖动 Combo 时候 Combo 不会实时跟随变动，拖动过程中有临时生成一个 delegate 图形，拖动结束后才更新 Combo 位置，默认为 false，不开启； -- `delegateStyle`：delegate 的样式； -- `onlyChangeComboSize`：拖动嵌套的 Combo 时，只改变父 Combo 的大小，不改变层级关系，默认为 false； -- `activeState`：当拖动 Combo 时，父 Combo 或进入到的 Combo 的状态值，需要用户在实例化 Graph 时在 `comboStateStyles` 里面配置，默认为空； -- `selectedState`：选中 Combo 的状态，默认为 selected，需要在 `comboStateStyles` 里面配置。 +- 配置项： + - `type: 'drag-combo'`； + - `enableDelegate`：拖动 Combo 时候是否开启图形代理 delegate，即拖动 Combo 时候 Combo 不会实时跟随变动，拖动过程中有临时生成一个 delegate 图形，拖动结束后才更新 Combo 位置，默认为 false，不开启； + - `delegateStyle`：delegate 的样式； + - `onlyChangeComboSize`：拖动嵌套的 Combo 时，只改变父 Combo 的大小，不改变层级关系，默认为 false； + - `activeState`：当拖动 Combo 时，父 Combo 或进入到的 Combo 的状态值，需要用户在实例化 Graph 时在 `comboStateStyles` 里面配置，默认为空； + - `selectedState`：选中 Combo 的状态，默认为 selected，需要在 `comboStateStyles` 里面配置。 **默认配置** -``` +```javascript const graph = new G6.Graph({ modes: { default: ['drag-combo'], @@ -32,9 +33,9 @@ const graph = new G6.Graph({ }); ``` -用户可根据实际需求，配置不同的参数。 +用户可根据实际需求，为 activeState 或 selectedState 配置样式： -``` +```javascript const graph = new G6.Graph({ modes: { default: [{ @@ -56,12 +57,13 @@ const graph = new G6.Graph({ V3.5 以上版本支持。 - 含义：收起和展开 Combo； -- `type: 'collapse-expand-combo'`； -- `trigger`：触发方式，默认为双击收起或展示，可配置 click 和 dblclick。 +- 配置项： + - `type: 'collapse-expand-combo'`； + - `trigger`：触发方式，默认为双击收起或展示，可配置 click 和 dblclick。 **默认配置** -``` +```javascript const graph = new G6.Graph({ modes: { default: ['collapse-expand-combo'], @@ -71,7 +73,7 @@ const graph = new G6.Graph({ 用户可以配置成单击展示或收起： -``` +```javascript const graph = new G6.Graph({ modes: { default: [{ @@ -82,25 +84,13 @@ const graph = new G6.Graph({ }); ``` -如果这两种方式都不能满足需求，用户可以通过以下方式自定义展示或收起的交互方式： - -``` -// 获取指定的 ComboId -graph.collapseExpandCombo(comboId); - -if (graph.get('layout')) { - graph.layout() -} else { - graph.refreshPositions() -} -``` - ### drag-canvas - 含义：拖拽画布； -- `type: 'drag-canvas'`； -- `direction`：允许拖拽方向，支持`'x'`，`'y'`，`'both'`，默认方向为 `'both'`。 +- 配置项： + - `type: 'drag-canvas'`； + - `direction`：允许拖拽方向，支持`'x'`，`'y'`，`'both'`，默认方向为 `'both'`。 **默认配置** @@ -135,11 +125,12 @@ const graph = new G6.Graph({ - 含义：缩放画布； - `type: 'zoom-canvas'`； -- `sensitivity`：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5； -- `minZoom`：最小缩放比例； -- `maxZoom`：最大缩放比例； -- `enableOptimize`：是否开启性能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape； -- `optimizeZoom`：当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape。 +- 配置项： + - `sensitivity`：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5； + - `minZoom`：最小缩放比例； + - `maxZoom`：最大缩放比例； + - `enableOptimize`：是否开启性能优化，默认为 false，设置为 true 开启，开启后缩放比例小于 optimizeZoom 时自动隐藏非 keyShape； + - `optimizeZoom`：当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape。 **提示：若要限定缩放尺寸，请在 graph 上设置  `minZoom`  和  `maxZoom`。** @@ -148,13 +139,14 @@ const graph = new G6.Graph({ **说明：** V3.5 以上版本才支持拖动 Combo 中的节点。 - 含义：拖拽节点，或拖动 Combo 中的节点； -- `type: 'drag-node'`； -- `delegateStyle`：节点拖拽时的绘图属性，默认为 `{ strokeOpacity: 0.6, fillOpacity: 0.6 }`； -- `updateEdge`：是否在拖拽节点时更新所有与之相连的边，默认为 `true` 。 -- `enableDelegate`：拖动节点过程中是否启用 `delegate`，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为  `false`； -- `onlyChangeComboSize`：V3.5 及以上版本支持，拖动节点过程中只改变 Combo 大小，不改变 Combo 结构，即不将节点从 Combo 中拖出或将节点拖入到 Combo 中，默认为 false； -- `comboActiveState`：V3.5 及以上版本支持，拖动节点过程中，如果存在 Combo，节点所在 Combo 或节点进入的 Combo 的状态，需要在实例化 Graph 时候通过 `comboStateStyles` 进行配置，默认为空； -- `selectedState`：V3.5 及以上版本支持，选中 Combo 的样式，需要在实例化 Graph 时候通过 `comboStateStyles` 进行配置,默认为 selected。 +- 配置项： + - `type: 'drag-node'`； + - `delegateStyle`：节点拖拽时的绘图属性，默认为 `{ strokeOpacity: 0.6, fillOpacity: 0.6 }`； + - `updateEdge`：是否在拖拽节点时更新所有与之相连的边，默认为 `true` 。 + - `enableDelegate`：拖动节点过程中是否启用 `delegate`，即在拖动过程中是否使用方框代替元素的直接移动，效果区别见下面两个动图。默认值为  `false`； + - `onlyChangeComboSize`：V3.5 及以上版本支持，拖动节点过程中只改变 Combo 大小，不改变 Combo 结构，即不将节点从 Combo 中拖出或将节点拖入到 Combo 中，默认为 false； + - `comboActiveState`：V3.5 及以上版本支持，拖动节点过程中，如果存在 Combo，节点所在 Combo 或节点进入的 Combo 的状态，需要在实例化 Graph 时候通过 `comboStateStyles` 进行配置，默认为空； + - `selectedState`：V3.5 及以上版本支持，选中 Combo 的样式，需要在实例化 Graph 时候通过 `comboStateStyles` 进行配置,默认为 selected。 **默认配置** @@ -188,9 +180,10 @@ const graph = new G6.Graph({ ### click-select - 含义：点击选中节点，再次点击节点或点击 Canvas 取消选中状态； -- `type: 'click-select'`； -- `multiple`：是否允许多选，默认为 `true`，当设置为 `false`，表示不允许多选，此时 `trigger` 参数无效。 -- `trigger`：指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt； +- 配置项： + - `type: 'click-select'`； + - `multiple`：是否允许多选，默认为 `true`，当设置为 `false`，表示不允许多选，此时 `trigger` 参数无效。 + - `trigger`：指定按住哪个键进行多选，默认为 shift，按住 Shift 键多选，用户可配置 shift、ctrl、alt； **默认配置** @@ -224,9 +217,12 @@ const graph = new G6.Graph({ ### tooltip - 含义：节点文本提示； -- `type: 'tooltip'`； -- `formatText(model)`：格式化函数，可以返回文本或者 HTML； -- `offset`：tooltip 距离鼠标的偏移量。 +- 配置项： + - `type: 'tooltip'`； + - `formatText(model)`：格式化函数，可以返回文本或者 HTML； + - `offset`：tooltip 距离鼠标的偏移量； + - `shouldBegin(e)`：是否允许 toolip 出现； + - `shouldUpdate(e)`：是否允许 toolip 内容更新。 ```javascript const graph = new G6.Graph({ @@ -264,9 +260,12 @@ const graph = new G6.Graph({ 使用方式基本与 tooltip 相同，但是移到边时触发。主要是为了将两个交互区分开，以满足用户边与节点的提示样式或 HTML 结构不同，以及不需要在事件中去区分是节点事件还是边事件等。 - 含义：边文本提示； -- `type: 'edge-tooltip'`； -- `formatText(model)`：格式化函数，可以返回文本或者 HTML； -- `offset`：tooltip 距离鼠标的偏移量。 +- 配置项： + - `type: 'edge-tooltip'`； + - `formatText(model)`：格式化函数，可以返回文本或者 HTML； + - `offset`：tooltip 距离鼠标的偏移量； + - `shouldBegin(e)`：是否允许 toolip 出现； + - `shouldUpdate(e)`：是否允许 toolip 内容更新。 ### activate-relations @@ -312,8 +311,8 @@ const graph = new G6.Graph({ ### brush-select - 含义：拖动框选节点； -- `type: 'brush-select'`； -- 参数： +- 配置项： + - `type: 'brush-select'`； - `brushStyle`：拖动框选框的样式，包括 `fill`、`fillOpacity`、`stroke` 和 `lineWidth` 四个属性; - `onSelect(nodes)`：选中节点时的回调，参数 `nodes` 表示选中的节点； - `onDeselect(nodes)`：取消选中节点时的回调，参数 `nodes` 表示取消选中的节点； @@ -395,8 +394,8 @@ const graph = new G6.Graph({ - 含义：只适用于树图，展开或收起子树； - 注意：若希望在首次布局时有默认收起的子树，则可以在数据中设置子树根节点的属性 `collapsed` 为 `true`。若希望使用代码控制子树的展开/收起，同样可以在数据中设置子树根节点的 `collapsed` 属性，并调用 `treeGraph.layout()` 使之生效； -- `type: 'collapse-expand'`； -- 参数： +- 配置项： + - `type: 'collapse-expand'`； - `trigger`：收起和展开树图的方式，支持 `'click'` 和 `'dblclick'` 两种方式。默认为 `'click'`，即单击； - `onChange`：收起或展开的回调函数。警告：V3.1.2 版本中将移除。 @@ -425,9 +424,9 @@ const graph = new G6.TreeGraph({ ### collapse-expand-group - 含义：收起和展开群组； -- `type：'collapse-expand-group'` -- 参数： - - trigger：收起和展开节点分组的方式。支持 `'click'` 和 `'dblclick'` 两种方式。默认为 `'dblclick'`，即双击。 +- 配置项： + - `type：'collapse-expand-group'` + - `trigger`：收起和展开节点分组的方式。支持 `'click'` 和 `'dblclick'` 两种方式。默认为 `'dblclick'`，即双击。 **默认配置** @@ -459,8 +458,8 @@ const graph = new G6.Graph({ ### drag-group - 含义：拖动节点分组； -- `type: 'drag-group'`； -- 参数： +- 配置项： + - `type: 'drag-group'`； - `delegateStyle`：拖动节点分组时 `delegate` 的样式。 **默认配置** @@ -476,8 +475,8 @@ const graph = new G6.Graph({ ### drag-node-with-group - 含义：拖动节点分组中的节点； -- `type：'drag-node-with-group'`； -- 参数： +- 配置项： + - `type：'drag-node-with-group'`； - `delegateStyle`：拖动节点时 `delegate` 的样式； - `maxMultiple`； - `minMultiple`。 diff --git a/gatsby-config.js b/gatsby-config.js index a92671ca0a..4f9d893104 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -125,8 +125,8 @@ module.exports = { { slug: 'api/nodeEdge', title: { - zh: '节点和边', - en: 'Node & Edge', + zh: '节点/边/Combo', + en: 'Node & Edge & Combo', }, order: 3, },