g6/docs/api/treeMethods.en.md
2020-11-13 22:33:15 +08:00

164 lines
3.6 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: TreeGraph Functions
order: 5
---
### data()
### addChild(data, parent)
Add sub tree to the parent node.
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>⚠️ Attention:</strong></span> G6 will use the `data` object as the model of the newly added item, and the `data` might be modified. If you do not want it to be modified, use the deep cloned `data` instead.
**Parameters**
| Name | Type | Required | Description |
| ------ | ------ | -------- | -------------------- |
| data | Object | true | The data of subtree. |
| parent | Node | String | true | The id or instance of parent node. |
**Usage**
```javascript
const data = {
id: 'sub1',
children: [
{
id: 'subTree1',
children: [...]
},
{
id: 'subTree2',
children: [...]
}
]
};
treeGraph.addChild(data, 'root')
```
### updateChild(data, parent)
Incrementally update the children data of the parent.
**Parameters**
| Name | Type | Required | Description |
| ------ | ------ | -------- | --------------------- |
| data | Object | true | The data of subtreee. |
| parent | Node | String | false | The id or instance of parent node. |
<span style="background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)"><strong>Attention:</strong></span> When the `parent` is null, this operation will update the graph fully.
**Usage**
```javascript
const data = {
id: 'sub1',
children: [
{
id: 'subTree1',
children: [...]
},
{
id: 'subTree2',
children: [...]
}
]
};
treeGraph.updateChild(data, 'root')
```
### removeChild(id)
Remove the subtree started from a child node with the id.
**Parameters**
| Name | Type | Required | Description |
| ---- | ------ | -------- | ------------------------------------ |
| id | String | true | The id of the subtree to be removed. |
**Usage**
```javascript
treeGraph.removeChild('sub');
```
## Layout
### changeLayout(layout)
Change the layout.
**Parameters**
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| layout | Object | false | The new layout configurations. If the `layout` is null, the layout will not be changed. |
**Usage**
```javascript
const layout = {
type: 'mindmap',
dirction: 'H',
getSubTreeSep: () => 20,
getVGap: () => 25,
getHeight: () => 30,
getWidth: () => 30,
};
treeGraph.changeLayout(layout);
```
### refreshLayout(fitView)
Refresh the layout. Usually, it is called after changing data.
**Parameters**
| Name | Type | Required | Description |
| ------- | ------- | -------- | -------------------------------------------- |
| fitView | Boolean | false | Whether to fit view after refreshing layout. |
**Usage**
```javascript
treeGraph.refreshLayout(true);
```
## Search
### findDataById(id, target)
Find data model according to the id.
**Parameters**
| Name | Type | Required | Description |
| --- | --- | --- | --- |
| id | String | true | The id of the item. |
| target | Object | false | Search from the target. If the target is null, this operation will search from the root node. |
**Return**
- The type of return value: Object;
- The return value is the data model of the found node.
**Usage**
```javascript
const target = {
id: 'sub1',
children: [...]
}
// Search the node with id 'sub1.1' from target
const subData = treeGraph.findDataById('sub1.1', target)
// Search the node with id 'sub1.1' from root node
const subData = treeGraph.findDataById('sub1.1')
```