From 5fd5cff1babe5e9913034192de3d342ae530e9b7 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Tue, 20 Jul 2021 14:18:42 +0800 Subject: [PATCH] docs: update site docs --- packages/core/src/graph/controller/layout.ts | 4 +- packages/core/src/item/item.ts | 8 +-- packages/pc/tests/unit/element/combo-spec.ts | 2 +- .../site/docs/api/Items/nodeMethods.en.md | 12 +--- .../site/docs/api/Items/nodeMethods.zh.md | 12 +--- .../docs/api/graphLayout/forceAtlas2.en.md | 55 +++++++++++++++++++ .../docs/api/graphLayout/forceAtlas2.zh.md | 4 +- .../docs/api/treeGraphLayout/compactBox.en.md | 16 ++++++ .../docs/api/treeGraphLayout/compactBox.zh.md | 15 +++++ .../middle/elements/edges/defaultEdge.en.md | 2 +- .../middle/elements/edges/defaultEdge.zh.md | 2 +- .../middle/elements/shape/transform.en.md | 10 +++- .../middle/elements/shape/transform.zh.md | 10 +++- .../tree/indented/demo/intendAlignTop.js | 2 +- 14 files changed, 118 insertions(+), 36 deletions(-) diff --git a/packages/core/src/graph/controller/layout.ts b/packages/core/src/graph/controller/layout.ts index 4267bfe2f3..3b27473730 100644 --- a/packages/core/src/graph/controller/layout.ts +++ b/packages/core/src/graph/controller/layout.ts @@ -329,11 +329,11 @@ export default abstract class LayoutController { let allHavePos = true; for (let i = 0; i < nodeLength; i++) { const node = nodes[i]; - if (isNaN(node.x)) { + if (isNaN(+node.x)) { allHavePos = false; node.x = (i % horiNum) * horiGap + beginX; } - if (isNaN(node.y)) { + if (isNaN(+node.y)) { allHavePos = false; node.y = Math.floor(i / horiNum) * vertiGap + beginY; } diff --git a/packages/core/src/item/item.ts b/packages/core/src/item/item.ts index db96ee00b2..7192658d3a 100644 --- a/packages/core/src/item/item.ts +++ b/packages/core/src/item/item.ts @@ -608,8 +608,8 @@ export default class ItemBase implements IItemBase { const cfgVisible = cfg.visible; if (oriVisible !== cfgVisible && cfgVisible !== undefined) this.changeVisibility(cfgVisible); const originPosition: IPoint = { x: model.x!, y: model.y! }; - cfg.x = isNaN(cfg.x) ? model.x : cfg.x; - cfg.y = isNaN(cfg.y) ? model.y : cfg.y; + cfg.x = isNaN(+cfg.x) ? model.x : (+cfg.x); + cfg.y = isNaN(+cfg.y) ? model.y : (+cfg.y); const styles = this.get('styles'); if (cfg.stateStyles) { @@ -671,8 +671,8 @@ export default class ItemBase implements IItemBase { public updatePosition(cfg: ModelConfig): boolean { const model: ModelConfig = this.get('model'); - const x = isNil(cfg.x) ? model.x : cfg.x; - const y = isNil(cfg.y) ? model.y : cfg.y; + const x = isNil(+cfg.x) ? (+model.x) : (+cfg.x); + const y = isNil(+cfg.y) ? (+model.y) : (+cfg.y); const group: IGroup = this.get('group'); diff --git a/packages/pc/tests/unit/element/combo-spec.ts b/packages/pc/tests/unit/element/combo-spec.ts index 475888afff..3b854cc864 100644 --- a/packages/pc/tests/unit/element/combo-spec.ts +++ b/packages/pc/tests/unit/element/combo-spec.ts @@ -71,4 +71,4 @@ describe('Combo with fixSize and fixCollapseSize', () => { graph.destroy(); }); -}); +}); \ No newline at end of file diff --git a/packages/site/docs/api/Items/nodeMethods.en.md b/packages/site/docs/api/Items/nodeMethods.en.md index 0f9130fb1d..d58784c369 100644 --- a/packages/site/docs/api/Items/nodeMethods.en.md +++ b/packages/site/docs/api/Items/nodeMethods.en.md @@ -123,16 +123,8 @@ Get all the anchor points of the node. ```javascript [ - (0: { - x: 100, - y: 105, - index: 0, - }), - (1: { - x: 200, - y: 105, - index: 1, - }), + [100, 105], + [200, 105] ]; ``` diff --git a/packages/site/docs/api/Items/nodeMethods.zh.md b/packages/site/docs/api/Items/nodeMethods.zh.md index 689c8f1c15..c8497fe5e1 100644 --- a/packages/site/docs/api/Items/nodeMethods.zh.md +++ b/packages/site/docs/api/Items/nodeMethods.zh.md @@ -129,16 +129,8 @@ const edges = node.getOutEdges(); ```javascript [ - (0: { - x: 100, - y: 105, - index: 0, - }), - (1: { - x: 200, - y: 105, - index: 1, - }), + [100, 105], + [200, 105] ]; ``` diff --git a/packages/site/docs/api/graphLayout/forceAtlas2.en.md b/packages/site/docs/api/graphLayout/forceAtlas2.en.md index 44f397b680..a90b05589e 100644 --- a/packages/site/docs/api/graphLayout/forceAtlas2.en.md +++ b/packages/site/docs/api/graphLayout/forceAtlas2.en.md @@ -35,3 +35,58 @@ const graph = new G6.Graph({ ## layoutCfg.workerEnabled **Type**: Boolean
**Default**: false
**Required**: false
**Description**: Whether to enable the web-worker in case layout calculation takes too long to block page interaction + +## layoutCfg.kr + +**Type**: Number
**Default**: 5
**Required**: false
**Description**: Repulsive parameter, smaller the kr, more compact the graph + +## layoutCfg.kg + +**Type**: Number
**Default**: 5
**Required**: false
**Description**: The parameter for the gravity. Larger kg, the graph will be more compact to the center + +## layoutCfg.ks + +**Type**: Number
**Default**: 0.1
**Required**: false
**Description**: The moving speed of the nodes during iterations + +## layoutCfg.tao + +**Type**: Number
**Default**: 0.1
**Required**: false
**Description**: The threshold of the swinging + +## layoutCfg.mode + +**Type**: 'normal' | 'linlog'
**Default**: 'normal'
**Required**: false
**Description**: Under 'linlog' mode, the cluster will be more compact +## layoutCfg.preventOverlap + +**Type**: boolean
**Default**: false
**Required**: false
**Description**: Whether prevent node overlappings + +## layoutCfg.dissuadeHubs + +**Type**: boolean
**Default**: false
**Required**: false
**Description**: Wheather to enable hub mode. If it is true, the nodes with larger in-degree will be placed on the center in higher priority + +## layoutCfg.barnesHut + +**Type**: boolean
**Default**: undefined
**Required**: false
**Description**: Whether to enable the barnes hut speedup, which is the quad-tree optimization. Due to the computation for quad-tree re-build in each iteration, we sugguest to enable it in large graph. It is undefined by deafult, when the number of nodes is larger than 250, it will be activated automatically. If it is set to be false, it will not be activated anyway + +## layoutCfg.prune + +**Type**: boolean
**Default**: undefined
**Required**: false
**Description**: Whether to enable auto pruning. It is undefined by default, which means when the number of nodes is larger than 100, it will be activated automatically. If it is set to be false, it will not be activated anyway + +## layoutCfg.maxIteration + +**Type**: number
**Default**: 0
**Required**: false
**Description**: The max iteration number. When it is set to be 0, the iteration number will be automatically adjusted according to the convergence + +## layoutCfg.getWidth + +**Type**: function
**Default**: undefined
**Required**: false
**Description**: The width function of the nodes, the parameter is the data model of a node + +## layoutCfg.getHeight + +**Type**: function
**Default**: undefined
**Required**: false
**Description**: The height function of the nodes, the parameter is the data model of a node + +## layoutCfg.onLayoutEnd + +**Type**: function
**Default**: undefined
**Required**: false
**Description**: The callback function of layout + +## layoutCfg.onTick + +**Type**: function
**Default**: undefined
**Required**: false
**Description**: The callback function for each iteration \ No newline at end of file diff --git a/packages/site/docs/api/graphLayout/forceAtlas2.zh.md b/packages/site/docs/api/graphLayout/forceAtlas2.zh.md index 9e6eb0efd8..195aec542f 100644 --- a/packages/site/docs/api/graphLayout/forceAtlas2.zh.md +++ b/packages/site/docs/api/graphLayout/forceAtlas2.zh.md @@ -66,11 +66,11 @@ const graph = new G6.Graph({ ## layoutCfg.barnesHut -**类型**： boolean
**默认值**：false
**是否必须**：false
**说明**：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开 +**类型**： boolean
**默认值**：undefined
**是否必须**：false
**说明**：是否打开 barnes hut 加速，即四叉树加速。由于每次迭代需要更新构建四叉树，建议在较大规模图上打开。默认情况下为 undefined，当节点数量大于 250 时它将会被激活。设置为 false 则不会自动被激活 ## layoutCfg.prune -**类型**： boolean
**默认值**：false
**是否必须**：false
**说明**：是否开启自动剪枝模式。默认情况下，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量 +**类型**： boolean
**默认值**：undefined
**是否必须**：false
**说明**：是否开启自动剪枝模式。默认情况下为 undefined，当节点数量大于 100 时它将会被激活。注意，剪枝能够提高收敛速度，但可能会降低图的布局质量。设置为 false 则不会自动被激活 ## layoutCfg.maxIteration diff --git a/packages/site/docs/api/treeGraphLayout/compactBox.en.md b/packages/site/docs/api/treeGraphLayout/compactBox.en.md index 8b5466b0b7..eab4eccbe5 100644 --- a/packages/site/docs/api/treeGraphLayout/compactBox.en.md +++ b/packages/site/docs/api/treeGraphLayout/compactBox.en.md @@ -35,6 +35,22 @@ CompactBox is the default layout for TreeGraph. It will consider the bounding bo img + +### layoutCfg.getSide + +**Type**: Function
**Example**: + +```javascript +(d) => { + // d is a node + if (d.id === 'test-child-id') return 'right'; + return 'left'; +}; +``` + +**Default**: 'right'
**Required**: false
**Description**: The callback function of node position(left or right of root node). Only affects the nodes which are connected to the root node directly. And the descendant nodes will be placed according to it + + ### layoutCfg.getId **Type**: Function
**Example**: diff --git a/packages/site/docs/api/treeGraphLayout/compactBox.zh.md b/packages/site/docs/api/treeGraphLayout/compactBox.zh.md index 6107470afc..729462fb0e 100644 --- a/packages/site/docs/api/treeGraphLayout/compactBox.zh.md +++ b/packages/site/docs/api/treeGraphLayout/compactBox.zh.md @@ -35,6 +35,21 @@ order: 1 img +### layoutCfg.getSide + +**类型**：Function
**示例**： + +```javascript +(d) => { + // d 是一个节点 + if (d.id === 'test-child-id') return 'right'; + return 'left'; +}; +``` + +**默认值**：'right'
**是否必须**：false
**说明**：节点排布在根节点的左侧/右侧。若设置了该值，则所有节点会在根节点同一侧，即 direction = 'H' 不再起效。若该参数为回调函数，则可以指定每一个节点在根节点的左/右侧。 + + ### layoutCfg.getId **类型**: Function
**示例**: diff --git a/packages/site/docs/manual/middle/elements/edges/defaultEdge.en.md b/packages/site/docs/manual/middle/elements/edges/defaultEdge.en.md index ab9978db51..2b46a1ca51 100644 --- a/packages/site/docs/manual/middle/elements/edges/defaultEdge.en.md +++ b/packages/site/docs/manual/middle/elements/edges/defaultEdge.en.md @@ -36,7 +36,7 @@ The table below shows the built-in edges and their special properties: | Name | Required | Type | Remark | | --- | --- | --- | --- | --- | -| id | false | String | The id of the edge, **MUST** be a unique string | +| id | true | String | The id of the edge, **MUST** be a unique string | | source | true | String | Number | The id of the source node | | target | true | String | The id of the target node | | type | false | String | The type of the edge. It can be the type of a Built-in Edge, or a custom Edge. `'line'` by default | diff --git a/packages/site/docs/manual/middle/elements/edges/defaultEdge.zh.md b/packages/site/docs/manual/middle/elements/edges/defaultEdge.zh.md index d7062741de..afff24397a 100644 --- a/packages/site/docs/manual/middle/elements/edges/defaultEdge.zh.md +++ b/packages/site/docs/manual/middle/elements/edges/defaultEdge.zh.md @@ -39,7 +39,7 @@ G6 提供了 9 种内置边： | 名称 | 是否必须 | 类型 | 备注 | | --- | --- | --- | --- | --- | -| id | false | String | 边唯一 ID，**必须**是唯一的 string | +| id | true | String | 边唯一 ID，**必须**是唯一的 string | | source | true | String | Number | 起始点 id | | target | true | String | 结束点 id | | type | false | String | 指定边的类型，可以是内置边的类型名称，也可以是自定义边的名称。默认为 `'line'` | diff --git a/packages/site/docs/manual/middle/elements/shape/transform.en.md b/packages/site/docs/manual/middle/elements/shape/transform.en.md index 162e79ad7a..3a4926e631 100644 --- a/packages/site/docs/manual/middle/elements/shape/transform.en.md +++ b/packages/site/docs/manual/middle/elements/shape/transform.en.md @@ -86,7 +86,10 @@ To achive some transformation in G6 3.3, you should set the matrix value manuall We provide the function for transformantion: ```javascript -import { transform } from '@antv/matrix-util'; +import { ext } from '@antv/matrix-util'; + +const transform = ext.transform; + // transform a 3*3 matrix transform(m, [ ['t', x, y], // translate with vector (x, y) @@ -100,7 +103,10 @@ transform(m, [ The following code registers a custom node with a transfromed rect with: translation with vector `(100, 50)`, rotating with angle `Math.PI / 4`, magnifying 2 times on x-axis and 0.5 times on y-axis: ```javascript -import { transform, mat3 } from '@antv/matrix-util'; +import { ext, mat3 } from '@antv/matrix-util'; + +const transform = ext.transform; + G6.registerNode('example', { drawShape: (cfg, group) => { const rect = group.addShape('rect', { diff --git a/packages/site/docs/manual/middle/elements/shape/transform.zh.md b/packages/site/docs/manual/middle/elements/shape/transform.zh.md index d23a890690..c0047f86b9 100644 --- a/packages/site/docs/manual/middle/elements/shape/transform.zh.md +++ b/packages/site/docs/manual/middle/elements/shape/transform.zh.md @@ -86,7 +86,10 @@ rect.transform([ 为了方面使用，我们提供了矩阵变换的工具方法： ```javascript -import { transform } from '@antv/matrix-util'; +import { ext } from '@antv/matrix-util'; + +const transform = ext.transform; + // 3*3 矩阵变换，用于二维渲染 transform(m, [ ['t', 100, 50], // translate (100, 50) @@ -100,7 +103,10 @@ transform(m, [ 以下方法实现了在自定义节点 example 中增加一个矩形，并将该矩形位移 `(100, 50)` 后，旋转 `Math.PI / 4`，最后在 x 方向放大 2 倍，并在 y 方向缩小 2 倍： ```javascript -import { transform, mat3 } from '@antv/matrix-util'; +import { ext, mat3 } from '@antv/matrix-util'; + +const transform = ext.transform; + G6.registerNode('example', { drawShape: (cfg, group) => { const rect = group.addShape('rect', { diff --git a/packages/site/examples/tree/indented/demo/intendAlignTop.js b/packages/site/examples/tree/indented/demo/intendAlignTop.js index 9c2025a566..86cfc9704c 100644 --- a/packages/site/examples/tree/indented/demo/intendAlignTop.js +++ b/packages/site/examples/tree/indented/demo/intendAlignTop.js @@ -52,7 +52,7 @@ G6.registerNode('card-node', { y: 0, r: 6, cursor: 'pointer', - symbol: G6.Marker.collapse, + symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse, stroke: '#666', lineWidth: 1, fill: '#fff',