布局

G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 Layout API文档。

layout()

重新以当前配置的属性进行一次布局。

用法

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'force',
  },
  modes: {
    default: ['drag-node'],
  },
});
graph.data({
  nodes: data.nodes,
  edges: data.edges.map((edge, i) => {
    edge.id = 'edge' + i;
    return Object.assign({}, edge);
  }),
});
graph.render();
function refreshDragedNodePosition(e) {
  const model = e.item.get('model');
  model.fx = e.x;
  model.fy = e.y;
}
graph.on('node:dragstart', e => {
  // 拖动节点时重新布局
  graph.layout();
  refreshDragedNodePosition(e);
});
graph.on('node:drag', e => {
  refreshDragedNodePosition(e);
});
graph.on('node:dragend', e => {
  e.item.get('model').fx = null;
  e.item.get('model').fy = null;
});

updateLayout(cfg)

更新布局配置项。

• 如果参数 cfg 中含有 type 字段，type 字段类型为 String，且与现有布局方法不同，则更换布局；
• 如果参数 cfg 中不包含 type 字段，则保持原有布局，仅更新布局配置项。参数

用法

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
  layout: {
    type: 'circular',
    center: [500, 300],
  },
  animate: true,
});
graph.data(data);
graph.render();
// 实例化时通过layout指定布局，在合适的时候通过updateLayout更新布局配置
graph.updateLayout({
  radius: 200,
  startAngle: Math.PI / 4,
  endAngle: Math.PI,
  divisions: 5,
  ordering: 'degree',
});