Grid

Grid 布局是将所有节点通过某种指定属性排序后，整齐地放置在网格上。

属性

begin

类型： Array示例：[ 0, 0 ]默认值：[ 0, 0 ]是否必须：false说明：网格开始位置（左上角）

preventOverlap

类型：Boolean默认值：false是否必须：false说明：是否防止重叠，必须配合下面属性 nodeSize ，只有设置了与当前图节点大小相同的 nodeSize 值，才能够进行节点重叠的碰撞检测

nodeSize

类型： Number默认值：30是否必须：false说明：节点大小（直径）。用于防止节点重叠时的碰撞检测

preventOverlapPadding

类型：Number默认值：10是否必须：false说明：避免重叠时节点的间距 padding。preventOverlap 为 true 时生效

condense

类型： Boolean默认值：false是否必须：false说明：为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间

rows

类型： Number默认值：undefined是否必须：false说明：网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算

cols

类型： Number默认值：undefined是否必须：false说明：网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算

sortBy

类型： String默认值：undefined是否必须：false说明：指定排序的依据（节点属性名），数值越高则该节点被放置得越中心。若为 undefined，则会计算节点的度数，度数越高，节点将被放置得越中心

方法

与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。

使用方法

实例化图时配置到 layout 中，如果没有配置 layout 默认使用 Random 布局。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'concentric',
    begin: [ 0, 0 ],          // 可选，
    preventOverlap: true,     // 可选，必须配合 nodeSize
    preventOverlapPdding: 20, // 可选
    nodeSize: 30,             // 可选
    condense: false,          // 可选
    rows: 5,                  // 可选
    cols: 5,                  // 可选
    sortBy: 'degree'          // 可选
  }
);