diff --git a/docs/api/Graph.en.md b/docs/api/Graph.en.md index db520c44fe4..0bf97556207 100644 --- a/docs/api/Graph.en.md +++ b/docs/api/Graph.en.md @@ -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. | ⚠️Attention: 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. @@ -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** @@ -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** @@ -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** @@ -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** @@ -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** @@ -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** diff --git a/docs/api/Plugins.en.md b/docs/api/Plugins.en.md index b43c47a046f..f60fea431f1 100644 --- a/docs/api/Plugins.en.md +++ b/docs/api/Plugins.en.md @@ -3,7 +3,7 @@ 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) @@ -11,7 +11,7 @@ There are several plugins in G6 which can be used inside and ouside G6 freely. ## 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 @@ -26,7 +26,7 @@ const graph = new G6.Graph({ ## Grid -Grid draw grids on the canvas. +Grid plugin draws grids on the canvas. img @@ -34,9 +34,9 @@ Use the code in [Configure to Graph](#configure-to-graph) to instantiate grid pl ### 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 @@ -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 @@ -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 | diff --git a/docs/manual/middle/Plugins.en.md b/docs/manual/middle/Plugins.en.md index ffdda4256b0..500f22070d5 100644 --- a/docs/manual/middle/Plugins.en.md +++ b/docs/manual/middle/Plugins.en.md @@ -3,7 +3,7 @@ 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) @@ -11,7 +11,7 @@ There are several plugins in G6 which can be used inside and ouside G6 freely. ## 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 @@ -26,7 +26,7 @@ const graph = new G6.Graph({ ## Grid -Grid draw grids on the canvas. +Grid plugin draws grids on the canvas. img @@ -34,9 +34,9 @@ Use the code in [Configure to Graph](#configure-to-graph) to instantiate grid pl ### 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 @@ -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 @@ -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 | +