Skip to content

Commit

Permalink
docs: update english version of new docs
Browse files Browse the repository at this point in the history
  • Loading branch information
Yanyan-Wang committed Jul 6, 2020
1 parent b1d4946 commit 2916872
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 71 deletions.
16 changes: 8 additions & 8 deletions docs/api/Graph.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ The life cycle of an instance of Graph is: Initialize -> Load data -> Render ->
| groupStyle | Object | | Group style for nodes, please refer to [Node Group](/en/docs/manual/middle/nodeGroup) for detail. |
| layout | 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 | string | 'canvas' / 'svg' | Render the graph with Canvas or SVG. It is supported expecting V3.3.x |
| enabledStack | boolean | false | Whether to enable stack,thar is, whether to support redo & undo operating, the configuration item V3.6 and above support. |
| maxStep | number | 10 | the max step of redo & undo, Only works if the enabledStack is true,the configuration item V3.6 and above support. |
| enabledStack | boolean | false | Whether to enable stack,that is, whether to support redo & undo operation. Support by V3.6 and latter versions. |
| maxStep | number | 10 | The max step number of redo & undo, works only when the `enabledStack` is `true`. Support by V3.6 and latter versions. |

<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️Attention:</strong></span> In G6 3.1, we added two new configurations for graph: `nodeStateStyles` and `edgeStateStyles`. In the same time, we deleted `nodeStyle` and `edgeStyle` . To upgrate, replace `nodeStyle` with `nodeStateStyles`, and replace `edgeStyle` with `edgeStateStyles`, and keep the sub-configuration inside them.

Expand Down Expand Up @@ -214,7 +214,7 @@ Change the data source, and render the graph according to the new data.
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| data | Object | false | Graph data, it should be an object containing an array of nodes and an array of edges. If it is not assigned, the graph will be re-rendered with the current data on the graph |
| stack | boolean | false | Whether push into the operator to the undo & redo stack, When enableStack is set to true when new Graph, it will be automatically pushed into the stack by default. If it is not needed, set this parameter to false. |
| stack | boolean | false | Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. |

**Usage**

Expand Down Expand Up @@ -375,7 +375,7 @@ Add item(node, edge, or group) to the graph.
| --- | --- | --- | --- |
| type | string | true | The type of the item. Options: `'node'`, `'edge'`, and `'group'`. |
| model | Object | true | The data model of the item, refer to [Item Model Properties](/en/docs/api/nodeEdge/itemProperties). When `type: 'group'`, refer to [Create Node Group](/en/docs/manual/advanced/create-node-group) |
| stack | boolean | false | Whether push into the operator to the undo & redo stack, When enableStack is set to true when new Graph, it will be automatically pushed into the stack by default. If it is not needed, set this parameter to false. |
| stack | boolean | false | Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. |

**Usage**

Expand Down Expand Up @@ -422,7 +422,7 @@ If there are combos in the graph, after calling updateItem to update the positio
| ---- | --------------- | -------- | ----------------------------------- |
| item | string / Object | true | The ID or the instance of the item |
| cfg | Object | false | New data model, refer to [Item Model Properties](/en/docs/api/nodeEdge/itemProperties) |
| stack | boolean | false | Whether push into the operator to the undo & redo stack, When enableStack is set to true when new Graph, it will be automatically pushed into the stack by default. If it is not needed, set this parameter to false. |
| stack | boolean | false | Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. |

**Usage**

Expand Down Expand Up @@ -521,7 +521,7 @@ Remove the item. When the item is the id of a group, this operation will delete
| Name | Type | Required | Description |
| ---- | --------------- | -------- | ----------------------------------- |
| item | string / Object | true | The id or the instance of the item. |
| stack | boolean | false | Whether push into the operator to the undo & redo stack, When enableStack is set to true when new Graph, it will be automatically pushed into the stack by default. If it is not needed, set this parameter to false. |
| stack | boolean | false | Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. |

**Usage**

Expand Down Expand Up @@ -749,7 +749,7 @@ Show the item. If the item is a node, the related edges will be shown in the sam
| Name | Type | Required | Description |
| ---- | --------------- | -------- | ----------------------------------- |
| item | string / Object | true | The id or the instance of the item. |
| stack | boolean | false | Whether push into the operator to the undo & redo stack, When enableStack is set to true when new Graph, it will be automatically pushed into the stack by default. If it is not needed, set this parameter to false. |
| stack | boolean | false | Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. |

**Usage**

Expand All @@ -771,7 +771,7 @@ Hide the item. If the item is a node, the related edges will be hidden in the sa
| Name | Type | Required | Description |
| ---- | --------------- | -------- | ----------------------------------- |
| item | string / Object | true | The id or the instance of the item. |
| stack | boolean | false | Whether push into the operator to the undo & redo stack, When enableStack is set to true when new Graph, it will be automatically pushed into the stack by default. If it is not needed, set this parameter to false. |
| stack | boolean | false | Whether to push the operator into the undo & redo stack. If the `enableStack` is `true`, this operation will be automatically pushed into the stack by default. Set `stack` to be `false` if you do not want it. |

**Usage**

Expand Down
64 changes: 32 additions & 32 deletions docs/api/Plugins.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ title: Plugins
order: 12
---

There are several plugins in G6 which can be used inside and ouside G6 freely.
There are several plugins in G6 which can be used for G6's graph or other applications.

- [Grid](#grid)
- [Minimap](#minimap)
- [Edge Bundling](#edge-bundling)

## Configure to Graph

You only need to instantiate it and configure the minimap onto the instance of Graph:
Instantiate the plugin and configure the minimap onto the instance of Graph:

```javascript
// Instantialize the Grid plugin
Expand All @@ -26,17 +26,17 @@ const graph = new G6.Graph({

## Grid

Grid draw grids on the canvas.
Grid plugin draws grids on the canvas.

<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*y8u6Rrc78uIAAAAAAAAAAABkARQnAQ' width=300 alt='img'/>

Use the code in [Configure to Graph](#configure-to-graph) to instantiate grid plugin with the following configurations.

### Configuration

| Name | Type | Description |
| --- | --- | --- |
| img | Srting | base64 formatted string for the grid image |
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| img | Srting | false | base64 formatted string for the grid image |


## Minimap
Expand All @@ -49,28 +49,28 @@ It can be configured to adjust the styles and functions.

### Configuration

| Name | Type | Description |
| --- | --- | --- |
| container | Object | The DOM container of Minimap. The plugin will generate a new one if `container` is not defined |
| className | String | The className of the DOM element of the Minimap |
| viewportClassName | String | The className of the DOM element of the view port on the Minimap |
| type | String | Render type. Options: `'default'`: Render all the graphics shapes on the graph; `'keyShape'`: Only render the keyShape of the items on the graph to reach better performance; `'delegate'`: Only render the delegate of the items on the graph to reach better performance. Performance: `'default'` < `'keyShape'` < `'delegate'`. `'default'` by default |
| size | Array | The size of the Minimap |
| delegateStyle | Object | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph |
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| container | Object | false | The DOM container of Minimap. The plugin will generate a new one if `container` is not defined |
| className | String | false | The className of the DOM element of the Minimap |
| viewportClassName | String | false | The className of the DOM element of the view port on the Minimap |
| type | String | false | Render type. Options: `'default'`: Render all the graphics shapes on the graph; `'keyShape'`: Only render the keyShape of the items on the graph to reach better performance; `'delegate'`: Only render the delegate of the items on the graph to reach better performance. Performance: `'default'` < `'keyShape'` < `'delegate'`. `'default'` by default |
| size | Array | false | The size of the Minimap |
| delegateStyle | Object | false | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph |

The `delegateStyle` has the properties:

| Name | Type | Description |
| ----------- | ------ | ----------------------- |
| fill | String | Filling color |
| stroke | String | Stroke color |
| lineWidth | Number | The width of the stroke |
| opacity | Number | Opacity |
| fillOpacity | Number | Filling opacity |
| Name | Type | Required | Description |
| ----------- | ------ | ------ | ----------------------- |
| fill | String | false | Filling color |
| stroke | String | false | Stroke color |
| lineWidth | Number | false | The width of the stroke |
| opacity | Number | false | Opacity |
| fillOpacity | Number | false | Filling opacity |

## Edge Bundling

In complex graph with large number of edges, edge bundling can help you to improve the visual clutter.
In complex graph with large number of edges, edge bundling helps you to improve the visual clutter.

<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*z9iXQq_kcrYAAAAAAAAAAABkARQnAQ' width=600 alt='img'/>

Expand All @@ -80,13 +80,13 @@ The edge bundling plugin can be configured to adjust the styles and functions.

### Configuration

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| K | Number | 0.1 | The strength of the bundling |
| lambda | Number | 0.1 | The initial step length |
| divisions | Number | 1 | The initial number of division on each edge. It will be multipled by `divRate` in each cycle |
| divRate | Number | 2 | The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large |
| cycles | Number | 6 | The number of outer interations |
| iterations | Number | 90 | The initial number of inner interations. It will be multiplied by `iterRate` in each cycle |
| iterRate | Number | 0.6666667 | The rate of the iterations decreasement |
| bundleThreshold | Number | 0.6 | The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle |
| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| K | Number | false | 0.1 | The strength of the bundling |
| lambda | Number | false | 0.1 | The initial step length |
| divisions | Number | false | 1 | The initial number of division on each edge. It will be multipled by `divRate` in each cycle |
| divRate | Number | false | 2 | The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large |
| cycles | Number | false | 6 | The number of outer interations |
| iterations | Number | false | 90 | The initial number of inner interations. It will be multiplied by `iterRate` in each cycle |
| iterRate | Number | false | 0.6666667 | The rate of the iterations decreasement |
| bundleThreshold | Number | false | 0.6 | The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle |
64 changes: 33 additions & 31 deletions docs/manual/middle/Plugins.en.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ title: Plugins
order: 11
---

There are several plugins in G6 which can be used inside and ouside G6 freely.
There are several plugins in G6 which can be used for G6's graph or other applications.

- [Grid](#grid)
- [Minimap](#minimap)
- [Edge Bundling](#edge-bundling)

## Configure to Graph

You only need to instantiate it and configure the minimap onto the instance of Graph:
Instantiate the plugin and configure the minimap onto the instance of Graph:

```javascript
// Instantialize the Grid plugin
Expand All @@ -26,17 +26,17 @@ const graph = new G6.Graph({

## Grid

Grid draw grids on the canvas.
Grid plugin draws grids on the canvas.

<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*y8u6Rrc78uIAAAAAAAAAAABkARQnAQ' width=300 alt='img'/>

Use the code in [Configure to Graph](#configure-to-graph) to instantiate grid plugin with the following configurations.

### Configuration

| Name | Type | Description |
| --- | --- | --- |
| img | Srting | base64 formatted string for the grid image |
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| img | Srting | false | base64 formatted string for the grid image |


## Minimap
Expand All @@ -49,24 +49,24 @@ It can be configured to adjust the styles and functions.

### Configuration

| Name | Type | Description |
| --- | --- | --- |
| container | Object | The DOM container of Minimap. The plugin will generate a new one if `container` is not defined |
| className | String | The className of the DOM element of the Minimap |
| viewportClassName | String | The className of the DOM element of the view port on the Minimap |
| type | String | Render type. Options: `'default'`: Render all the graphics shapes on the graph; `'keyShape'`: Only render the keyShape of the items on the graph to reach better performance; `'delegate'`: Only render the delegate of the items on the graph to reach better performance. Performance: `'default'` < `'keyShape'` < `'delegate'`. `'default'` by default |
| size | Array | The size of the Minimap |
| delegateStyle | Object | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph |
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| container | Object | false | The DOM container of Minimap. The plugin will generate a new one if `container` is not defined |
| className | String | false | The className of the DOM element of the Minimap |
| viewportClassName | String | false | The className of the DOM element of the view port on the Minimap |
| type | String | false | Render type. Options: `'default'`: Render all the graphics shapes on the graph; `'keyShape'`: Only render the keyShape of the items on the graph to reach better performance; `'delegate'`: Only render the delegate of the items on the graph to reach better performance. Performance: `'default'` < `'keyShape'` < `'delegate'`. `'default'` by default |
| size | Array | false | The size of the Minimap |
| delegateStyle | Object | false | Takes effect when `type` is `'delegate'`. The style of the delegate of the items on the graph |

The `delegateStyle` has the properties:

| Name | Type | Description |
| ----------- | ------ | ----------------------- |
| fill | String | Filling color |
| stroke | String | Stroke color |
| lineWidth | Number | The width of the stroke |
| opacity | Number | Opacity |
| fillOpacity | Number | Filling opacity |
| Name | Type | Required | Description |
| ----------- | ------ | ------ | ----------------------- |
| fill | String | false | Filling color |
| stroke | String | false | Stroke color |
| lineWidth | Number | false | The width of the stroke |
| opacity | Number | false | Opacity |
| fillOpacity | Number | false | Filling opacity |

## Edge Bundling

Expand All @@ -80,13 +80,15 @@ The edge bundling plugin can be configured to adjust the styles and functions.

### Configuration

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| K | Number | 0.1 | The strength of the bundling |
| lambda | Number | 0.1 | The initial step length |
| divisions | Number | 1 | The initial number of division on each edge. It will be multipled by `divRate` in each cycle |
| divRate | Number | 2 | The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large |
| cycles | Number | 6 | The number of outer interations |
| iterations | Number | 90 | The initial number of inner interations. It will be multiplied by `iterRate` in each cycle |
| iterRate | Number | 0.6666667 | The rate of the iterations decreasement |
| bundleThreshold | Number | 0.6 | The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle |

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| K | Number | false | 0.1 | The strength of the bundling |
| lambda | Number | false | 0.1 | The initial step length |
| divisions | Number | false | 1 | The initial number of division on each edge. It will be multipled by `divRate` in each cycle |
| divRate | Number | false | 2 | The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large |
| cycles | Number | false | 6 | The number of outer interations |
| iterations | Number | false | 90 | The initial number of inner interations. It will be multiplied by `iterRate` in each cycle |
| iterRate | Number | false | 0.6666667 | The rate of the iterations decreasement |
| bundleThreshold | Number | false | 0.6 | The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle |

0 comments on commit 2916872

Please sign in to comment.