Layout

G2 当前支持的布局：

树的正交布局
线性布局
桑基布局

Layout.Tree

树的布局默认是正交布局，子节点在父节点的下面。

var data = [{
  name: 'root',
  children: [{
    name: 'a',
    children: [{
      name: 'a1'
    }, {
      name: 'a2'
    }]
  }, {
    name: 'b',
    children: [{
      name: 'b1',
      children: [{
        name: 'b11'
      }]
    }]
  }, {
    name: 'c'
  }]
}];
var layout = new G2.Layout.Tree({
  nodes: data
});

var nodes = layout.getNodes();
var edges = layout.getEdges();

属性

nodes

类型：Array

参与布局的节点。

width

布局的宽度，默认 1。

height

布局的高度，默认 1。

dx

叶子节点布局的间隔，一般是横向间隔，注意用户坐标系翻转时表示垂直间隔。

dy

不同层级之间的间隔。

childrenFiled

子节点对应的字段，默认 'children'。

collapsedField

节点折叠对应的字段，默认值'collapsed'。

方法

getNodes

layout.getNodes()

获取布局完毕的节点

返回节点的格式：

{id: 'nodeId', x: x, y: y, ..传入的各个字段..}

如果id未设置，则自动生成。

getEdges

layout.getEdges()

获取布局后的边，边的格式

{source: 'parentId', target: 'nodeId'}

findNode

layout.findNode(id)

根据id查找节点，如果未指定id，则会自动生成id

reset

layout.reset()

重新计算layout。

var node = treeLayout.findNode('id');
node.collapsed = true;
treeLayout.reset();
var nodes = treeLayout.getNodes();
var edges = treeLayout.getEdges();

Layout.linear

一般线性布局。

var data = [{
    id: 0,
    name: 'a1',
    type: 'group1'
  }, {
    id:1,
    name: 'a2',
    type: 'group2'
  }];

var linear = new G2.Layout.Linear({
  nodes: data,
  y:80
});

var nodes = layout.getNodes();

带权重的线性布局：

var data = [{
    id: 0,
    name: 'a1',
    value: 5
  }, {
    id:1,
    name: 'a2',
    value: 8
  }];

var linear = new G2.Layout.Linear({
  nodes: data,
  hasWeight: true,  // 是否带权重配置项
  y:80
});

var nodes = layout.getNodes();

属性

nodes

类型：Array

参与布局的节点，包含 id、权重（可选）字段

idField 唯一区分节点的字段，当节点数据没有id字段时使用该字段生成id，默认'name'；
valueFiel 节点权重对应的字段，默认 'value',使用该字段需配置hasWeight为true。

edges

类型：Array

参与布局的节点的边数据，当没有节点数据，只有边数据时，可以通过该数据自动创建出节点，包含源节点、目标节点和起始权值和结束权值4个字段：

sourceField 源节点字段名，默认值'source'
targetField 目标节点字段名，默认'target'
sourceWeightField 起始权值的字段名，默认 'sourceWeight'
targetWeightField (可选)结束权值的字段名，默认 'targetWeight'

hasWeight

是否带权重，默认 false

thickness

节点的厚度，默认 0.05

margin

节点边距，默认0.01(单位：总宽度的占比)

y

节点的统一y坐标，默认0

方法

getNodes

layout.getNodes()

获取布局完毕的节点

返回节点的格式：

{x: x, y: y, ..传入的各个字段..}

reset

layout.reset()

重新计算layout。

Layout.sankey

var nodes = [{
    id: 0,
    name: 'a1',
    value: 10
  }, {
    id:1,
    name: 'a2',
    value: 5
  },{
    id:2,
    name: 'a3',
    value: 5
  }];

var edges = [{
  source:'0',
  target:'1',
  value:5
},{
  source:'0',
  target:'2',
  value:5
}]
var layout = new G2.Layout.sankey({
  nodes: nodes,
  edges: edges,
  thickness: 0.02,  // 节点厚度
});

var nodes = layout.getNodes();
var edges = layout.getEdges();

属性

nodes

类型：Array

(可选) 参与布局的节点。

可包含id、节点层级、节点权值三个字段，不传入该数据则根据边数据中自动创建出节点，该节点只有一个id字段

idField 唯一区分节点的字段，当节点数据没有id字段时使用该字段生成id，默认'name'
stepField 层级的字段名，默认'step'
valueField 权重的字段名，默认 'value'

edges

类型：Array

（必选）参与布局的边，包含源节点、目标节点和权值3个字段

valueField 权重的字段名，默认 'value'
sourceField 源节点字段名，默认值'source'
targetField 目标节点字段名，默认'target'

thickness

节点的厚度，默认 0.05。

margin

节点边距，默认0.01。

calculationTimes

布局次数，默认 2，复杂数据可以适量增加。

方法

getNodes

layout.getNodes()

获取布局完毕的节点

返回节点的格式：

{id: 'nodeId', x: x, y: y, ..传入的各个字段..}

如果id未设置，则自动生成。

getEdges

layout.getEdges()

获取排序后的边。

reset

layout.reset()

重新计算layout。