TreeGraph Functions

4 min read

data()

addChild(data, parent)

Add sub tree to the parent node.

⚠️ Attention: 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

NameTypeRequiredDescription
dataObjecttrueThe data of subtree.
parentNodeStringtrueThe id or instance of parent node.

Usage

const data = {
  id: 'sub1',
  children: [
    {
      id: 'subTree1',
      children: [...]
    },
    {
      id: 'subTree2',
      children: [...]
    }
  ]
};

treeGraph.addChild(data, 'root')

updateChild(data, parentId)

Incrementally update or add one child data of a parent node. If you want to update all the children of the parent, try updateChildren instead. The following image illustrate the differences between updateChild and updateChildren:
img img

Parameters

NameTypeRequiredDescription
dataTreeDatatrueThe data of subtreee.
parentStringfalseThe id of the parent node.
⚠️Attention: When the parent is null, this operation will update the graph fully.

Usage

const data = {
  id: 'sub1',
  children: [
    {
      id: 'subTree1',
      children: [...]
    },
    {
      id: 'subTree2',
      children: [...]
    }
  ]
};

treeGraph.updateChild(data, 'root')

updateChildren(data, parentId)

Update all the children of the parent. If you want to update or add one child of the parent, try updateChild instead. The following image illustrate the differences between updateChild and updateChildren:

img img

Parameters

NameTypeRequiredDescription
dataTreeData[]trueThe data of subtreee.
parentStringtrueThe id of the parent node.

Usage

const data = [
  {
    id: 'subTree1',
    children: [...]
  },
  {
    id: 'subTree2',
    children: [...]
  }
];

treeGraph.updateChildren(data, 'root')

removeChild(id)

Remove the subtree started from a child node with the id.

Parameters

NameTypeRequiredDescription
idStringtrueThe id of the subtree to be removed.

Usage

treeGraph.removeChild('sub');

Layout

changeLayout(layout)

Change the layout.

Parameters

NameTypeRequiredDescription
layoutObjectfalseThe new layout configurations. If the layout is null, the layout will not be changed.

Usage

const layout = {
  type: 'mindmap',
  direction: 'H',
  getSubTreeSep: () => 20,
  getVGap: () => 25,
  getHeight: () => 30,
  getWidth: () => 30,
};
treeGraph.changeLayout(layout);

layout(fitView)

Refresh the layout. Usually, it is called after changing data. The refreshLayout is discarded by v4.x, call layout instead.

Parameters

NameTypeRequiredDescription
fitViewBooleanfalseWhether to fit view after refreshing layout.

Usage

treeGraph.layout(true);

findDataById(id, target)

Find data model according to the id.

Parameters

NameTypeRequiredDescription
idStringtrueThe id of the item.
targetObjectfalseSearch 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

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')