渲染

render()

根据提供的数据渲染视图。

用法

graph.render();

renderCustomGroup(data, groupType)

根据提供的数据渲染组群。

参数

用法

const data = {
  nodes: [
    {
      id: 'node1',
      groupId: 'group1',
      label: 'node1',
    },
    {
      id: 'node2',
      groupId: 'group1',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
  groups: [
    {
      id: 'group1',
      title: {
        text: '我的群组1',
        stroke: '#444',
        offsetX: -20,
        offsetY: 30,
      },
    },
  ],
};
// graph是Graph的实例
graph.renderCustomGroup(data, 'circle');

read(data)

接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。

参数

用法

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};
// graph是Graph的实例
graph.read(data);

changeData(data)

更新数据源，根据新的数据重新渲染视图。

参数

用法

const data = {
  nodes: [
    {
      id: 'node1',
      label: 'node1',
    },
    {
      id: 'node2',
      label: 'node2',
    },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};
// graph是Graph的实例
graph.changeData(data);

collapseGroup(groupId)

收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。

参数

用法

graph.collapseGroup('groupId');

expandGroup(groupId)

展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。

参数

用法

graph.expandGroup('groupId');