mirror of
https://gitee.com/antv/g6.git
synced 2024-11-30 18:58:34 +08:00
docs: update docs for english version of combo behaviors. docs: update the API of items.
This commit is contained in:
Yanyan-Wang
Yanyan Wang
parent
024d930996
commit
cd09a10a6a
@ -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
|
||||
|
||||
@ -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', {
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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)。
|
||||
|
||||
### 参数
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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。
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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()
|
||||
|
||||
|
||||
@ -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()
|
||||
|
||||
|
||||
@ -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;
|
||||
- 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`: 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.
|
||||
- `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,23 +84,11 @@ 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;
|
||||
- Configurations:
|
||||
- `type: 'drag-canvas'`;
|
||||
- `direction`: The direction of dragging that is allowed. Options: `'x'`, `'y'`, `'both'`. `'both'` by default.
|
||||
|
||||
@ -134,6 +124,7 @@ The canvas can be dragged along x direction only.<br /><img src='https://gw.alip
|
||||
### zoom-canvas
|
||||
|
||||
- Description: Zoom the canvas;
|
||||
- Configurations:
|
||||
- `type: 'zoom-canvas'`;
|
||||
- `sensitivity`: The sensitivity of the zooming, range from 1 to 10. `5` by default.
|
||||
|
||||
@ -142,13 +133,14 @@ The canvas can be dragged along x direction only.<br /><img src='https://gw.alip
|
||||
### drag-node
|
||||
|
||||
- Description: Allows users drag nodes;
|
||||
- Configurations:
|
||||
- `type: 'drag-node'`;
|
||||
- `delegateStyle`: The drawing properties when the nodes are dragged. `{ strokeOpacity: 0.6, fillOpacity: 0.6 }` by default;
|
||||
- `updateEdge`: Whether to update all connected edges when dragging nodes. `true` by default.
|
||||
- `enableDelegate`: Whether activate `delegate` when dragging nodes, which means whether to use a virtual rect moved with the dragging mouse instead of the node. The effect is shown in the figures below. `false` by default;
|
||||
- `onlyChangeComboSize`: Supported by V3.5 or later. Only Change the size of Combo When dragging combos, whici means not to change the struct of combo. `false` by default;
|
||||
- `comboActiveState`: Supported by V3.5 or later. 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`: Supported by V3.5 or later. state name when combo selected, `selected` by default.
|
||||
- `onlyChangeComboSize`:Supported by V3.5 or later vertions. Only Change the size of the prarent combo whose child node to be dragged, which means do not change the hierarchy structures of combos and nodes. `false` by default;
|
||||
- `comboActiveState`: Supported by V3.5 or later vertions. 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`: Supported by V3.5 or later vertions. The state's name(string) when combo is selected, `'selected'` by default.
|
||||
|
||||
**Default Configuration**
|
||||
|
||||
@ -182,9 +174,10 @@ const graph = new G6.Graph({
|
||||
### click-select
|
||||
|
||||
- Description: Select a node by clicking. Cancel the selected state by clicking the node agian or clicking the canvas;
|
||||
- Configurations:
|
||||
- `type: 'click-select'`;
|
||||
- `multiple`: Whether to allow multiple selection. `true` by default. `false` means multiple selection is not allowed, and the `trigger` will not take effect.
|
||||
- `trigger`: Specify which key to hold for multiple selection. `shift` by default, which means multiple selection is activated when the shift button is pressed. Options: `'shift'`, `'ctrl'`, `'alt'`, and so on;
|
||||
- `trigger`: Specify which key to hold for multiple selection. `shift` by default, which means multiple selection is activated when the shift button is pressed. Options: `'shift'`, `'ctrl'`, `'alt'`, and so on.
|
||||
|
||||
**Default Configuration**
|
||||
|
||||
@ -218,9 +211,12 @@ With the configuration above, users are allowed to select more than one nodes wh
|
||||
### tooltip
|
||||
|
||||
- Description: The tooltip for node;
|
||||
- Configurations:
|
||||
- `type: 'tooltip'`;
|
||||
- `formatText(model)`: Format function, returns a text string or an HTML element;
|
||||
- `offset`：the offset of the tooltip to the mouse.
|
||||
- `offset`: the offset of the tooltip to the mouse.
|
||||
- `shouldBegin(e)`: Whether allow the tooltip the show up;
|
||||
- `shouldUpdate(e)`: Whether allow the tooltip to be updated.
|
||||
|
||||
```javascript
|
||||
const graph = new G6.Graph({
|
||||
@ -258,15 +254,18 @@ const graph = new G6.Graph({
|
||||
The usage of edge-tooltip is similar to tooltip. It will be activated when the user hover the mouse onto an edge.
|
||||
|
||||
- Description: The tooltip for edge;
|
||||
- Configurations:
|
||||
- `type: 'edge-tooltip'`;
|
||||
- `formatText(model)`: Format function, returns a text string or an HTML element;
|
||||
- `offset`：the offset of the tooltip to the mouse.
|
||||
- `offset`: the offset of the tooltip to the mouse;
|
||||
- `shouldBegin(e)`: Whether allow the tooltip the show up;
|
||||
- `shouldUpdate(e)`: Whether allow the tooltip to be updated.
|
||||
|
||||
### activate-relations
|
||||
|
||||
- Description: Highlight the node and its related nodes and edges when the mouse enter the node;
|
||||
- `type: 'activate-relations'`;
|
||||
- Configurations:
|
||||
- `type: 'activate-relations'`;
|
||||
- `trigger: 'mouseenter'`. `mousenter` means acitvating when the mouse enter a node; `click` means activating when the mouse click a node;
|
||||
- `activeState: 'active'`. The state name when the node is activated. When `activate-relations` is activated, the related nodes and edges will have this state. `active` by default. It can be combined with `nodeStyle` and `edgeStyle` of graph to enrich the visual effect;
|
||||
- `inactiveState: 'inactive'`. The state name when of the node is inactivated. All the nodes and edges which are not activated by `activate-relations` will have this state. `inactive` by default. It can be combined with `nodeStyle` and `edgeStyle` of graph to enrich the visual effect;
|
||||
@ -306,8 +305,8 @@ Assign `true` to `resetSelected` to reset the selected states for nodes after th
|
||||
### brush-select
|
||||
|
||||
- Description: Allows uers to select nodes by brushing;
|
||||
- `type: 'brush-select'`;
|
||||
- Configurations:
|
||||
- `type: 'brush-select'`;
|
||||
- `brushStyle`: The styles of the marquee. It contains four configurations: `fill`、`fillOpacity`、`stroke` and `lineWidth`;
|
||||
- `onSelect(nodes)`: The callback function when selecting a node. `nodes` is the selected ndoes;
|
||||
- `onDeselect(nodes)`: The callback function when canceling selections. `nodes` is the selected ndoes;
|
||||
@ -349,7 +348,7 @@ const graph = new G6.Graph({
|
||||
|
||||
By the configurations above, the operation is activated when the Ctrl button is pressed, and the edges will not be selected during the process.<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1xNZT7mPFK4AAAAAAAAAAABkARQnAQ' width=400 alt='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;
|
||||
- Configurations:
|
||||
- `type: 'collapse-expand'`;
|
||||
- Configuration:
|
||||
- `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;
|
||||
- Configurations:
|
||||
- `type: 'drag-group'`;
|
||||
- Configuration:
|
||||
- `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;
|
||||
- Configurations:
|
||||
- `type: 'drag-node-with-group'`;
|
||||
- Configuration:
|
||||
- `delegateStyle`: The style of the `delegate` when dragging the node.
|
||||
- `maxMultiple`;
|
||||
- `minMultiple`.
|
||||
|
||||
@ -15,6 +15,7 @@ Behavior 是 G6 提供的定义图上交互事件的机制。它与[交互模式
|
||||
V3.5 以上版本支持。
|
||||
|
||||
- 含义：拖动 Combo；
|
||||
- 配置项：
|
||||
- `type: 'drag-combo'`；
|
||||
- `enableDelegate`：拖动 Combo 时候是否开启图形代理 delegate，即拖动 Combo 时候 Combo 不会实时跟随变动，拖动过程中有临时生成一个 delegate 图形，拖动结束后才更新 Combo 位置，默认为 false，不开启；
|
||||
- `delegateStyle`：delegate 的样式；
|
||||
@ -24,7 +25,7 @@ V3.5 以上版本支持。
|
||||
|
||||
**默认配置**
|
||||
|
||||
```
|
||||
```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。
|
||||
|
||||
**默认配置**
|
||||
|
||||
```
|
||||
```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,23 +84,11 @@ 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'`。
|
||||
|
||||
@ -135,6 +125,7 @@ const graph = new G6.Graph({
|
||||
|
||||
- 含义：缩放画布；
|
||||
- `type: 'zoom-canvas'`；
|
||||
- 配置项：
|
||||
- `sensitivity`：缩放灵敏度，支持 1-10 的数值，默认灵敏度为 5；
|
||||
- `minZoom`：最小缩放比例；
|
||||
- `maxZoom`：最大缩放比例；
|
||||
@ -148,6 +139,7 @@ const graph = new G6.Graph({
|
||||
**说明：** V3.5 以上版本才支持拖动 Combo 中的节点。
|
||||
|
||||
- 含义：拖拽节点，或拖动 Combo 中的节点；
|
||||
- 配置项：
|
||||
- `type: 'drag-node'`；
|
||||
- `delegateStyle`：节点拖拽时的绘图属性，默认为 `{ strokeOpacity: 0.6, fillOpacity: 0.6 }`；
|
||||
- `updateEdge`：是否在拖拽节点时更新所有与之相连的边，默认为 `true` 。
|
||||
@ -188,6 +180,7 @@ const graph = new G6.Graph({
|
||||
### click-select
|
||||
|
||||
- 含义：点击选中节点，再次点击节点或点击 Canvas 取消选中状态；
|
||||
- 配置项：
|
||||
- `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 距离鼠标的偏移量。
|
||||
- `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 距离鼠标的偏移量。
|
||||
- `offset`：tooltip 距离鼠标的偏移量；
|
||||
- `shouldBegin(e)`：是否允许 toolip 出现；
|
||||
- `shouldUpdate(e)`：是否允许 toolip 内容更新。
|
||||
|
||||
### activate-relations
|
||||
|
||||
@ -312,8 +311,8 @@ const graph = new G6.Graph({
|
||||
### 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'`；
|
||||
- 参数：
|
||||
- `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'`，即双击。
|
||||
- `trigger`：收起和展开节点分组的方式。支持 `'click'` 和 `'dblclick'` 两种方式。默认为 `'dblclick'`，即双击。
|
||||
|
||||
**默认配置**
|
||||
|
||||
@ -459,8 +458,8 @@ const graph = new G6.Graph({
|
||||
### 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'`；
|
||||
- 参数：
|
||||
- `delegateStyle`：拖动节点时 `delegate` 的样式；
|
||||
- `maxMultiple`；
|
||||
- `minMultiple`。
|
||||
|
||||
@ -125,8 +125,8 @@ module.exports = {
|
||||
{
|
||||
slug: 'api/nodeEdge',
|
||||
title: {
|
||||
zh: '节点和边',
|
||||
en: 'Node & Edge',
|
||||
zh: '节点/边/Combo',
|
||||
en: 'Node & Edge & Combo',
|
||||
},
|
||||
order: 3,
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user