笔记

Appearance

大纲

图的布局 ​

图的布局指图中节点排布方式，根据数据结构分为 一般布局 和 树形布局
若未指定布局，会按照节点坐标信息进行布局，若缺少坐标信息，则默认使用 'random' 布局

配置方式 ​

js
const graph = new G6.Graph({
  // ...
  layout: {
    type: "force",
    preventOverlap: true, // 避免节点重叠，需要配置 nodeSize
    nodeSize: 10, // 节点大小
    // gpuEnabled?: boolean;     是否启用 gpu
    // workerEnabled?: boolean;  是否启用 webworker
    // workerScriptURL?: string;
    // onLayoutEnd?: () => void;
    // ... 其他配置
  },
});

webworker ​

配置 layout.workerEnabled: true 可以开启 webworker 计算. 避免阻塞页面

  • 树图 不支持
  • 子图 不支持

切换布局 ​

graph.updateLayout(params): 布局方法或参数的切换

  • 参数包含 type 且与当前布局类型不同时替换当前布局
  • 参数不含 type 或与当前布局类型相同时仅更新原有参数

graph.changeData(data): 数据源变动则重新渲染视图