fix: api images

This commit is contained in:
Yanyan-Wang 2019-11-17 12:47:49 +08:00
parent a2fee82358
commit 692ebd1f82
16 changed files with 46 additions and 50 deletions

View File

@ -6,7 +6,7 @@ title: API
**Type**: Array<br />**Example**: [ 0, 0 ]<br />**Default**: The center of grpah<br />**Required**: false<br />**Explanation**: The center of the layout
## preventOverlap
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Switch to prevent the node overlappings. It should be used with [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN). Only if the `nodeSize` is assigned, the collide detection will take effect.
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Switch to prevent the node overlappings. It should be used with `nodeSize`. Only if the `nodeSize` is assigned, the collide detection will take effect.
## nodeSize
**Type**: Number<br />**Default**: 30<br />**Required**: false<br />**Explanation**: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.
@ -27,7 +27,7 @@ title: API
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Place the nodes in clockwise or not.
## maxLevelDiff
**Type**: Number<br />**默认值: **undefined<br />**Required**: false<br />**Explanation**: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if sortBy='degree', maxValue is the max degree value of all the nodes
**Type**: Number<br />**Default**: undefined<br />**Required**: false<br />**Explanation**: The sum of concentric values in each level. If it is undefined, maxValue / 4 will take place, where maxValue is the max value of ordering properties. For example, if sortBy='degree', maxValue is the max degree value of all the nodes
## sortBy
**Type**: String<br />**Default**: undefined<br />**Required**: false<br />**Explanation**: Order the nodes according to this parameter. It is the property's name of node. The node with higher value will be placed to the center. If it is undefined, the algorithm will order the nodes by their degree.

View File

@ -5,7 +5,7 @@ title: API
**类型** Array<br />**示例**[ 0, 0 ]<br />**默认值**:图的中心<br />**是否必须**false<br />**说明**:布局的中心
## preventOverlap
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否防止重叠,必须配合下面属性 [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) ,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够进行节点重叠的碰撞检测
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否防止重叠,必须配合下面属性 `nodeSize` ,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够进行节点重叠的碰撞检测
## nodeSize
**类型** Number<br />**默认值**30<br />**是否必须**false<br />**说明**:节点大小(直径)。用于防止节点重叠时的碰撞检测
@ -26,7 +26,7 @@ title: API
**类型** Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否按照顺时针排列
## maxLevelDiff
**类型** Number<br />**默认值**undefined<br />**是否必须**false<br />**说明**:每一层同心值的求和。若为 undefined则将会被设置为 maxValue / 4 ,其中 maxValue 为最大的排序依据的属性值。例如,若 sortBy='degree',则 maxValue 为所有节点中度数最大的节点的度数
**类型** Number<br />**默认值**undefined<br />**是否必须**false<br />**说明**:每一层同心值的求和。若为 undefined则将会被设置为 maxValue / 4 ,其中 maxValue 为最大的排序依据的属性值。例如,若 sortBy='degree',则 maxValue 为所有节点中度数最大的节点的度数
## sortBy
**类型** String<br />**默认值**undefined<br />**是否必须**false<br />**说明**:指定排序的依据(节点属性名),数值越高则该节点被放置得越中心。若为 undefined则会计算节点的度数度数越高节点将被放置得越中心

View File

@ -3,7 +3,7 @@ title: API
---
## preventOverlap
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Prevent node overlappings. Only when the [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) is assigned, the collide detection will take effect
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Prevent node overlappings. Only when the `nodeSize` is assigned, the collide detection will take effect
## nodeSize
**Type**: Number<br />**Default**: 30<br />**Required**: false<br />**Explanation**: The size of the nodes(diameter). For collide detection to prevent node overlappings

View File

@ -3,7 +3,7 @@ title: API
---
## preventOverlap
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否防止重叠,必须配合下面属性 [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN) ,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够进行节点重叠的碰撞检测
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否防止重叠,必须配合下面属性 `nodeSize`,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够进行节点重叠的碰撞检测
## nodeSize
**类型** Number<br />**默认值**30<br />**是否必须**false<br />**说明**:节点大小(直径)。用于防止节点重叠时的碰撞检测

View File

@ -18,7 +18,7 @@ title: API
**Type**: Number<br />**Default**: 100<br />**Required**: false<br />**Explanation**: The distance between circles. If it is not assigned, this algorithm will calculate a value to fill the whole canvas.
## preventOverlap
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Switch to prevent the node overlappings. It should be used with [`nodeSize`](https://www.yuque.com/antv/g6/ngp0vg#xWjHN). Only if the `nodeSize` is assigned, the collide detection will take effect.
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: Switch to prevent the node overlappings. It should be used with `nodeSize`. Only if the `nodeSize` is assigned, the collide detection will take effect.
## nodeSize
**Type**: Number<br />**Default**: 10<br />**Required**: false<br />**Explanation**: The size of the node(diameter). It will be used in collide dectection for preventing node overlappings.
@ -32,6 +32,6 @@ title: API
- When `preventOverlap` is `true` and `strictRadial` is `false`, this algorithm will try to place the overlapped nodes alone a circle without overlappings as much as possible. But the overlappings might not be able to avoid while there are too many nodes in a small circle.
- When `preventOverlap` is `true` and `strictRadial` is `true`, this algorithm allows offsets between nodes on the same level to prevent node overlappings.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571823019221-9dca17b5-de09-4a1f-bc2e-d3449bcf3b15.png#align=left&display=inline&height=99&name=image.png&originHeight=782&originWidth=1708&search=&size=618660&status=done&width=217)        ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571822948753-8770ced2-4d49-4e32-8b63-d4274b3d954b.png#align=left&display=inline&height=115&name=image.png&originHeight=1022&originWidth=1730&search=&size=777561&status=done&width=194)      ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571822993803-287544ef-2b0a-4187-862b-39d9cba314c5.png#align=left&display=inline&height=113&name=image.png&originHeight=920&originWidth=1716&search=&size=709533&status=done&width=210)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*j-7IRp5qhxcAAAAAAAAAAABkARQnAQ' width=217/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5pVjQ6uRSyEAAAAAAAAAAABkARQnAQ' width=194/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IpMeTr6Lqv0AAAAAAAAAAABkARQnAQ' width=210/>
> LeftpreventOverlap = false。CenterpreventOverlap = falsestrictRadial = true。RightpreventOverlap = falsestrictRadial = false。

View File

@ -18,7 +18,7 @@ title: API
**类型**Number<br />**默认值**100<br />**是否必须**false<br />**说明**:每一圈距离上一圈的距离。默认填充整个画布,即根据图的大小决定
## preventOverlap
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否防止重叠,必须配合下面属性 [`nodeSize`](#xWjHN) ,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够进行节点重叠的碰撞检测
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否防止重叠,必须配合下面属性 `nodeSize` ,只有设置了与当前图节点大小相同的 `nodeSize` 值,才能够进行节点重叠的碰撞检测
## nodeSize
**类型** Number<br />**默认值**10<br />**是否必须**false<br />**说明**:节点大小(直径)。用于防止节点重叠时的碰撞检测
@ -32,6 +32,6 @@ title: API
- 当 `preventOverlap``true`,且 `strictRadial``false` 时,有重叠的节点严格沿着所在的环展开,但在一个环上若节点过多,可能无法完全避免节点重叠。
- 当 `preventOverlap``true`,且 `strictRadial``true` 时,允许同环上重叠的节点不严格沿着该环布局,可以在该环的前后偏移以避免重叠。
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571823019221-9dca17b5-de09-4a1f-bc2e-d3449bcf3b15.png#align=left&display=inline&height=99&name=image.png&originHeight=782&originWidth=1708&search=&size=618660&status=done&width=217)        ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571822948753-8770ced2-4d49-4e32-8b63-d4274b3d954b.png#align=left&display=inline&height=115&name=image.png&originHeight=1022&originWidth=1730&search=&size=777561&status=done&width=194)      ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571822993803-287544ef-2b0a-4187-862b-39d9cba314c5.png#align=left&display=inline&height=113&name=image.png&originHeight=920&originWidth=1716&search=&size=709533&status=done&width=210)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*j-7IRp5qhxcAAAAAAAAAAABkARQnAQ' width=217/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5pVjQ6uRSyEAAAAAAAAAAABkARQnAQ' width=194/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IpMeTr6Lqv0AAAAAAAAAAABkARQnAQ' width=210/>
> preventOverlap = false。preventOverlap = falsestrictRadial = true。preventOverlap = falsestrictRadial = false。

View File

@ -6,27 +6,27 @@ title: API
- TB —— Root is on the top, layout from the top to the bottom
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833657395-7b291d7b-5408-41fa-bfb6-533ef39250ad.png#align=left&display=inline&height=59&name=image.png&originHeight=744&originWidth=1786&search=&size=397159&status=done&width=141)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gBrxRL_fzlMAAAAAAAAAAABkARQnAQ' width=141/>
- BT —— Root is on the bottom, layout from the bottom to the top
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833676794-31f862f3-8cb5-412e-81d4-2ac246e37c0d.png#align=left&display=inline&height=60&name=image.png&originHeight=762&originWidth=1790&search=&size=390312&status=done&width=140)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*WkJeRI-EUBkAAAAAAAAAAABkARQnAQ' width=140/>
- LR —— Root is on the left, layout from the left to the right
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833574730-5d76d7a2-0e82-4ef7-a7d9-a45efd5b6b30.png#align=left&display=inline&height=119&name=image.png&originHeight=906&originWidth=518&search=&size=164555&status=done&width=68)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*BGNcSaWupSUAAAAAAAAAAABkARQnAQ' width=68/>
- RL —— Root is on the right, layout from the right to the left
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833593889-e98c6f6d-0c38-4408-a4c0-ba83d0bbba74.png#align=left&display=inline&height=115&name=image.png&originHeight=932&originWidth=454&search=&size=154391&status=done&width=56)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J6JTSa-IID8AAAAAAAAAAABkARQnAQ' width=56/>
- H —— Root is on the middle, layout in horizontal symmetry.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833726277-822e5104-2189-4fe4-bcdc-7b43d183d541.png#align=left&display=inline&height=110&name=image.png&originHeight=906&originWidth=824&search=&size=226469&status=done&width=100)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5FVzSqlW2H4AAAAAAAAAAABkARQnAQ' width=100/>
- V —— Root is on the middle, layout in vertical symmetry.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833702068-8f409559-1765-4154-bd4d-bb782de8cd23.png#align=left&display=inline&height=92&name=image.png&originHeight=924&originWidth=1028&search=&size=314177&status=done&width=102)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZFCiTLwCoAYAAAAAAAAAAABkARQnAQ' width=102/>
## getWidth
**Type**: Number | Function<br />**Example**:
@ -73,4 +73,5 @@ title: API
**默认值**: 18<br />**Required**: false<br />**Explanation**: The vertical separation of nodes
## radial
**Type**: Boolean<br />**默认值**: false<br />**Required**: false<br />**Explanation**: If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833817425-f944eadd-fd68-4107-8425-81c1c9bd1ce4.png#align=left&display=inline&height=175&name=image.png&originHeight=886&originWidth=990&search=&size=213310&status=done&width=195)
**Type**: Boolean<br />**默认值**: false<br />**Required**: false<br />**Explanation**: If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:<br />
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MqFcTLAhXIsAAAAAAAAAAABkARQnAQ' width=195/>

View File

@ -6,27 +6,27 @@ title: API
- TB —— 根节点在上,往下布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833657395-7b291d7b-5408-41fa-bfb6-533ef39250ad.png#align=left&display=inline&height=59&name=image.png&originHeight=744&originWidth=1786&search=&size=397159&status=done&width=141)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*gBrxRL_fzlMAAAAAAAAAAABkARQnAQ' width=141/>
- BT —— 根节点在下,往上布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833676794-31f862f3-8cb5-412e-81d4-2ac246e37c0d.png#align=left&display=inline&height=60&name=image.png&originHeight=762&originWidth=1790&search=&size=390312&status=done&width=140)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*WkJeRI-EUBkAAAAAAAAAAABkARQnAQ' width=140/>
- LR —— 根节点在左,往右布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833574730-5d76d7a2-0e82-4ef7-a7d9-a45efd5b6b30.png#align=left&display=inline&height=119&name=image.png&originHeight=906&originWidth=518&search=&size=164555&status=done&width=68)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*BGNcSaWupSUAAAAAAAAAAABkARQnAQ' width=68/>
- RL —— 根节点在右,往左布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833593889-e98c6f6d-0c38-4408-a4c0-ba83d0bbba74.png#align=left&display=inline&height=115&name=image.png&originHeight=932&originWidth=454&search=&size=154391&status=done&width=56)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*J6JTSa-IID8AAAAAAAAAAABkARQnAQ' width=56/>
- H —— 根节点在中间,水平对称布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833726277-822e5104-2189-4fe4-bcdc-7b43d183d541.png#align=left&display=inline&height=110&name=image.png&originHeight=906&originWidth=824&search=&size=226469&status=done&width=100)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5FVzSqlW2H4AAAAAAAAAAABkARQnAQ' width=100/>
- V —— 根节点在中间,垂直对称布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833702068-8f409559-1765-4154-bd4d-bb782de8cd23.png#align=left&display=inline&height=92&name=image.png&originHeight=924&originWidth=1028&search=&size=314177&status=done&width=102)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZFCiTLwCoAYAAAAAAAAAAABkARQnAQ' width=102/>
## getWidth
**类型**Number | Function<br />**示例**
@ -73,4 +73,5 @@ title: API
**默认值**18<br />**是否必须**false<br />**说明**:每个节点的垂直间隙
## radial
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否按照辐射状布局。若 `radial``true`,建议 `direction` 设置为 `'LR'``'RL'`<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833817425-f944eadd-fd68-4107-8425-81c1c9bd1ce4.png#align=left&display=inline&height=175&name=image.png&originHeight=886&originWidth=990&search=&size=213310&status=done&width=195)
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否按照辐射状布局。若 `radial``true`,建议 `direction` 设置为 `'LR'``'RL'`<br />
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MqFcTLAhXIsAAAAAAAAAAABkARQnAQ' width=195/>

View File

@ -1,3 +0,0 @@
---
title: API
---

View File

@ -1,3 +0,0 @@
---
title: API
---

View File

@ -8,27 +8,27 @@ title: API
- TB —— Root is on the top, layout from the top to the bottom
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832831947-89713eef-7898-446b-9edc-604ed63b77d4.png#align=left&display=inline&height=48&name=image.png&originHeight=760&originWidth=1784&search=&size=518414&status=done&width=112)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*B2hvT4yzh7YAAAAAAAAAAABkARQnAQ' width=112/>
- BT —— Root is on the bottom, layout from the bottom to the top
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832849059-ada0d199-ca15-4ce0-83e0-de00f9482c0b.png#align=left&display=inline&height=50&name=image.png&originHeight=786&originWidth=1814&search=&size=517688&status=done&width=115)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*WkJeRI-EUBkAAAAAAAAAAABkARQnAQ' width=115/>
- LR —— Root is on the left, layout from the left to the right
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832767625-ad86a4b6-dabb-4f53-9800-31bb3fef88c6.png#align=left&display=inline&height=114&name=image.png&originHeight=896&originWidth=408&search=&size=214689&status=done&width=52)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2lJ5SYrUqhQAAAAAAAAAAABkARQnAQ' width=52/>
- RL —— Root is on the right, layout from the right to the left
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832804357-6b4c6e65-22fe-45b1-ab9f-bf954cdb0b13.png#align=left&display=inline&height=116&name=image.png&originHeight=912&originWidth=410&search=&size=213061&status=done&width=52)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UQlBR6dz8ZoAAAAAAAAAAABkARQnAQ' width=52/>
- H —— Root is on the middle, layout in horizontal symmetry.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832893099-55fa98c8-30f2-49c6-b582-76dd69de7b4a.png#align=left&display=inline&height=104&name=image.png&originHeight=892&originWidth=712&search=&size=279079&status=done&width=83)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5FVzSqlW2H4AAAAAAAAAAABkARQnAQ' width=83/>
- V —— Root is on the middle, layout in vertical symmetry.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832910720-f3d479c3-b822-4123-b207-a81e22fad324.png#align=left&display=inline&height=91&name=image.png&originHeight=922&originWidth=1172&search=&size=366086&status=done&width=116)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZFCiTLwCoAYAAAAAAAAAAABkARQnAQ' width=116/>
## nodeSep
**Type**: Number<br />**Default**: 0<br />**Required**: false<br />**Explanation**: Node separation
@ -37,4 +37,4 @@ title: API
**Type**: Number<br />**Default**: 0<br />**Required**: false<br />**Explanation**: Level separation
## radial
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833294684-7874d71d-fb44-4340-95d0-c03b56c67a18.png#align=left&display=inline&height=172&name=image.png&originHeight=926&originWidth=922&search=&size=286654&status=done&width=171)
**Type**: Boolean<br />**Default**: false<br />**Required**: false<br />**Explanation**: If layout the graph in radial style. If `radial` is `true`, we recommend to set `direction` to `'LR'` or `'RL'`:<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MqFcTLAhXIsAAAAAAAAAAABkARQnAQ' width=171/>

View File

@ -6,27 +6,27 @@ title: API
- TB —— 根节点在上,往下布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832831947-89713eef-7898-446b-9edc-604ed63b77d4.png#align=left&display=inline&height=48&name=image.png&originHeight=760&originWidth=1784&search=&size=518414&status=done&width=112)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*B2hvT4yzh7YAAAAAAAAAAABkARQnAQ' width=112/>
- BT —— 根节点在下,往上布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832849059-ada0d199-ca15-4ce0-83e0-de00f9482c0b.png#align=left&display=inline&height=50&name=image.png&originHeight=786&originWidth=1814&search=&size=517688&status=done&width=115)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*WkJeRI-EUBkAAAAAAAAAAABkARQnAQ' width=115/>
- LR —— 根节点在左,往右布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832767625-ad86a4b6-dabb-4f53-9800-31bb3fef88c6.png#align=left&display=inline&height=114&name=image.png&originHeight=896&originWidth=408&search=&size=214689&status=done&width=52)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2lJ5SYrUqhQAAAAAAAAAAABkARQnAQ' width=52/>
- RL —— 根节点在右,往左布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832804357-6b4c6e65-22fe-45b1-ab9f-bf954cdb0b13.png#align=left&display=inline&height=116&name=image.png&originHeight=912&originWidth=410&search=&size=213061&status=done&width=52)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*UQlBR6dz8ZoAAAAAAAAAAABkARQnAQ' width=52/>
- H —— 根节点在中间,水平对称布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832893099-55fa98c8-30f2-49c6-b582-76dd69de7b4a.png#align=left&display=inline&height=104&name=image.png&originHeight=892&originWidth=712&search=&size=279079&status=done&width=83)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*5FVzSqlW2H4AAAAAAAAAAABkARQnAQ' width=83/>
- V —— 根节点在中间,垂直对称布局
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832910720-f3d479c3-b822-4123-b207-a81e22fad324.png#align=left&display=inline&height=91&name=image.png&originHeight=922&originWidth=1172&search=&size=366086&status=done&width=116)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*ZFCiTLwCoAYAAAAAAAAAAABkARQnAQ' width=116/>
## nodeSep
**类型**Number<br />**默认值**0<br />**是否必须**false<br />**说明**:节点间距
@ -35,4 +35,4 @@ title: API
**类型**Number<br />**默认值**0<br />**是否必须**false<br />**说明**:层与层之间的间距
## radial
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否按照辐射状布局。若 `radial``true`,建议 `direction` 设置为 `'LR'``'RL'`<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571833294684-7874d71d-fb44-4340-95d0-c03b56c67a18.png#align=left&display=inline&height=172&name=image.png&originHeight=926&originWidth=922&search=&size=286654&status=done&width=171)
**类型**Boolean<br />**默认值**false<br />**是否必须**false<br />**说明**:是否按照辐射状布局。若 `radial``true`,建议 `direction` 设置为 `'LR'``'RL'`<br /><img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*MqFcTLAhXIsAAAAAAAAAAABkARQnAQ' width=171/>

View File

@ -9,7 +9,7 @@ title: API
- RL —— Root is on the right, layout from the right to the left(center image below)<br />
- H —— Root is on the middle, layout in horizontal symmetry(right image below)
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832031826-33f11b5c-3d7a-4767-89b0-1d7cb6f64510.png#align=left&display=inline&height=282&name=image.png&originHeight=908&originWidth=354&search=&size=141929&status=done&width=110)          ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832083137-c38a3f7a-885e-4acf-954a-73fbeb822bde.png#align=left&display=inline&height=279&name=image.png&originHeight=890&originWidth=278&search=&size=133215&status=done&width=87)           ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832100885-51d8526e-d530-4090-9f37-4fdd4f9e865a.png#align=left&display=inline&height=272&name=image.png&originHeight=910&originWidth=526&search=&size=205642&status=done&width=157)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wZ5zTLzeVxgAAAAAAAAAAABkARQnAQ' width=110/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*q-fCSryViNMAAAAAAAAAAABkARQnAQ' width=87/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*O3fxTqaoipUAAAAAAAAAAABkARQnAQ' width=157/>
> LeftLR。CenterRL。RightH。

View File

@ -9,7 +9,7 @@ title: API
- RL —— 根节点在右,往左布局(下图中)<br />
- H —— 根节点在中间,水平对称布局(下图右)
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832031826-33f11b5c-3d7a-4767-89b0-1d7cb6f64510.png#align=left&display=inline&height=282&name=image.png&originHeight=908&originWidth=354&search=&size=141929&status=done&width=110)          ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832083137-c38a3f7a-885e-4acf-954a-73fbeb822bde.png#align=left&display=inline&height=279&name=image.png&originHeight=890&originWidth=278&search=&size=133215&status=done&width=87)           ![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571832100885-51d8526e-d530-4090-9f37-4fdd4f9e865a.png#align=left&display=inline&height=272&name=image.png&originHeight=910&originWidth=526&search=&size=205642&status=done&width=157)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*wZ5zTLzeVxgAAAAAAAAAAABkARQnAQ' width=110/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*q-fCSryViNMAAAAAAAAAAABkARQnAQ' width=87/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*O3fxTqaoipUAAAAAAAAAAABkARQnAQ' width=157/>
> LR。RL。H。

View File

@ -7,11 +7,11 @@ title: API
- H —— Root is on the middle, layout in horizontal symmetry.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571830487985-0c3dfc8c-fadd-4911-8ea4-1b4091a86538.png#align=left&display=inline&height=122&name=image.png&originHeight=906&originWidth=1266&search=&size=267710&status=done&width=170)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1v35TYcFO0cAAAAAAAAAAABkARQnAQ' width=170/>
- V —— Root is on the middle, layout in vertical symmetry.
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571830515639-e66a5347-09fe-4583-81d6-178aa6920f7b.png#align=left&display=inline&height=136&name=image.png&originHeight=920&originWidth=982&search=&size=252410&status=done&width=145)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*x-bVTLOD-BcAAAAAAAAAAABkARQnAQ' width=145/>
<a name="MUDRY"></a>
## getWidth

View File

@ -7,11 +7,11 @@ title: API
- Hhorizontal水平—— 根节点的子节点分成两部分横向放置在根节点左右两侧
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571830487985-0c3dfc8c-fadd-4911-8ea4-1b4091a86538.png#align=left&display=inline&height=122&name=image.png&originHeight=906&originWidth=1266&search=&size=267710&status=done&width=170)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*1v35TYcFO0cAAAAAAAAAAABkARQnAQ' width=170/>
- Vvertical (竖直)—— 将根节点的所有孩子纵向排列
![image.png](https://cdn.nlark.com/yuque/0/2019/png/156681/1571830515639-e66a5347-09fe-4583-81d6-178aa6920f7b.png#align=left&display=inline&height=136&name=image.png&originHeight=920&originWidth=982&search=&size=252410&status=done&width=145)
<img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*x-bVTLOD-BcAAAAAAAAAAABkARQnAQ' width=145/>
<a name="MUDRY"></a>
## getWidth