• 树的布局算法，有正交布局、径向布局、缩进布局、圆锥布局等
  • 图的布局算法，有力导布局、MDS 布局等

上面的布局算法在 D3 中都有介绍，本章仅介绍 G2 实现的布局算法和一些约定。

关系图一般使用节点-链接法绘制，使用节点表示对象，用线（或者边）表示关系。节点链接法的布局有几个原则：

  • 节点不能相互遮挡、边尽量避免交叉
  • 节点的不能移出边界，尽量提升空间利用率

使用节点-链接法绘制关系图需要两份数据，节点的数据和边的数据。由于G2中一个View只能使用一个数据源，所以在 G2 中绘制关系图需要两个 View，所以在 G2 中绘制关系图的步骤如下：

  • 声明节点和边的数据
  • 创建图表
  • 绘制边，保证节点绘制在边上面
  • XXX绘制节点
  2. var nodes = [// 节点信息：类别、ID，位置 x,y
  3.   {id: '0',name: '开始',type: 'start',x: 50,y: 10},
  4.   {id: '1',name: '步骤一',type: 'action',x: 50,y: 20},
  5.   {id: '2',name: '步骤二',type: 'action',x: 50,y: 30},
  6.   {id: '3',name: '条件',type: 'condition',x: 50,y: 40},
  7.   {id: '4.1',name: '分步骤一',type: 'action',x: 40,y: 50},
  8.   {id: '4.2',name: '分步骤二',type: 'action',x: 60,y: 50},
  9.   {id: '5',name: '汇总',type: 'action',x: 50,y: 60},
  10.   {id: '6',name: '结束',type: 'end',x: 50,y: 70}
  11. ];
  12. var edges = [
  13.   {source: '0', target: '1'},
  14.   {source: '1', target: '2'},
  15.   {source: '2', target: '3'},
  16.   {source: '3', target: '4.1'},
  17.   {source: '3', target: '4.2'},
  18.   {source: '4.1', target: '5'},
  19.   {source: '4.2', target: '5'},
  20.   {source: '5', target: '6'}
  21. ];
  23. var Stat = G2.Stat;
  24. var chart = new G2.Chart({
  25.   id: 'c1',
  26.   width: 800,
  27.   height: 500,
  28.   plotCfg: {
  29.     margin: [0,0]
  30.   }
  31. });
  33. var defs = {
  34.   x: {min: 0,max:100},
  35.   y: {min: 0, max:100},
  36.   '..x': {min: 0,max:100},
  37.   '..y': {min: 0,max:100}
  38. };
  40. // 首先绘制 edges，点要在边的上面
  41. // 创建单独的视图
  42. var edgeView = chart.createView();
  43. edgeView.source(edges, defs);
  44. edgeView.coord().reflect(); // 从上到下
  45. edgeView.axis(false);
  46. edgeView.tooltip(false);
  47. // Stat.link 方法会生成 ..x, ..y的字段类型，数值范围是 0-1
  48. edgeView.edge()
  49.   .position(Stat.link('source*target',nodes))
  50.   .color('#ccc');
  52. // 绘制节点
  53. var nodeView = chart.createView();
  54. nodeView.coord().reflect(); // 从上到下
  55. nodeView.axis(false);
  56. nodeView.source(nodes, defs);
  57. nodeView.point().position('x*y').color('steelblue')
  58.   .label('name', {
  59.   offset: 10
  60. })
  61.   .tooltip('name');
  62. chart.render();
  • 由于节点和链接在两个视图上，所以需要统一两个视图的x,y的度量
  • 链接需要使用节点计算线（边）的起始、结束为止，所以需要统计函数 Stat.link

在 G2 中只要我们知道节点的位置和对应的边就能绘制出关系图，在 G2 中布局算法不是必须的，只要能够计算出节点的位置即可，计算出来的节点需要满足：

  • 节点中需要 x, y, id 字段，方便边的起始、结束点计算
  • 计算出来的 x, y 的值都要分布在 [0 - 1] 的范围内

G2 目前仅支持了树的正交布局，保证树的空间利用率最高

使用正交布局的步骤

  • 指定数据源
  • 使用布局算法计算树节点的位置，获取树节点之间的边
  • 分别创建边的视图和节点的视图，传入数据源
  • 渲染
  1. // 指定数据源
  2. var data = [{
  3.   name: 'root',
  4.   children: [{
  5.     name: 'a',
  6.     children: [{
  7.       name: 'a1'
  8.     }, {
  10.     }]
  11.   }, {
  12.     name: 'b',
  13.     children: [{
  14.       name: 'b1',
  15.       children: [{
  16.         name: 'b11'
  17.       }]
  18.     }]
  19.   }, {
  20.     name: 'c'
  21.   }]
  22. }];
  23. var layout = new G2.Layout.Tree({
  24.   nodes: data
  25. });
  27. var nodes = layout.getNodes();
  28. var edges = layout.getEdges();
  30. var Stat = G2.Stat;
  31. var chart = new G2.Chart({
  32.   id: 'c2',
  33.   width: 800,
  34.   height: 500,
  35.   plotCfg: {
  36.     margin: [20,0]
  37.   }
  38. });
  40. var defs = {
  41.   x: {min: 0,max:1},
  42.   y: {min: 0, max:1}/*, 由于 ..x和..y的默认大小就是 0-1,所以可以不设置
  43.   '..x': {min: 0,max:1},
  44.   '..y': {min: 0,max:1}*/
  45. };
  47. // 首先绘制 edges，点要在边的上面
  48. // 创建单独的视图
  49. var edgeView = chart.createView();
  50. edgeView.source(edges, defs);
  51. edgeView.coord().reflect(); // 从上到下
  52. edgeView.axis(false);
  53. edgeView.tooltip(false);
  54. // Stat.link 方法会生成 ..x, ..y的字段类型，数值范围是 0-1
  55. edgeView.edge()
  56.   .position(Stat.link('source*target',nodes))
  57.   .color('#ccc');
  59. // 绘制节点
  60. var nodeView = chart.createView();
  61. nodeView.coord().reflect(); // 从上到下
  62. nodeView.axis(false);
  63. nodeView.source(nodes, defs);
  64. nodeView.point().position('x*y').color('steelblue')
  65.   .label('name', {
  66.   offset: 10
  67. })
  68.   .tooltip('name');
  69. chart.render();

实现自己的布局算法非常容易只要满足以下条件：

  • 节点的返回值中存在 x, y 字段
  • 节点和边能够通过id 相互关联起来

使用自己布局算法的注意事项：

  • 统一边和节点视图的 x，y 度量的大小范围
  • 设定数据源
  • 在G2中使用布局算法
  1. var data = [
  2.   {id: '1', name: '1'},
  3.   {id: '2', name: '2'},
  4.   {id: '3', name: '3'},
  5.   {id: '4', name: '4'},
  6.   {id: '5', name: '5'},
  7.   {id: '6', name: '6'}
  8. ];
  11.   {source: '0', target: '1'},
  12.   {source: '1', target: '2'},
  13.   {source: '2', target: '3'},
  14.   {source: '3', target: '5'},
  15.   {source: '3', target: '6'},
  16.   {source: '4', target: '2'},
  17.   {source: '5', target: '6'}
  18. ];
  20. // 自己的随机布局算法
  21. function layout(nodes) {
  22.   var rst = [];
  24.   nodes.forEach(function(node) {
  25.     var obj = {};
  26.     obj.id = node.id;
  27.     obj.name = node.name;
  28.     obj.x = Math.random();
  29.     obj.y = Math.random(); // 使得 x,y随机的分布在0-1范围内
  30.     rst.push(obj);
  31.   });
  33.   return rst;
  34. }
  36. // 调用布局算法
  37. var nodes = layout(data);
  39. var Stat = G2.Stat;
  40. var chart = new G2.Chart({
  41.   id: 'c3',
  42.   width: 800,
  43.   height: 500,
  44.   plotCfg: {
  45.     margin: [20,20]
  46.   }
  47. });
  48. var defs = {
  49.   x: {min: 0,max:1},
  50.   y: {min: 0, max:1}/*, 由于 ..x和..y的默认大小就是 0-1,所以可以不设置
  51.   '..x': {min: 0,max:1},
  52.   '..y': {min: 0,max:1}*/
  53. };
  55. // 首先绘制 edges，点要在边的上面
  56. // 创建单独的视图
  57. var edgeView = chart.createView();
  58. edgeView.source(edges, defs);
  59. edgeView.coord().reflect(); // 从上到下
  60. edgeView.axis(false);
  61. edgeView.tooltip(false);
  62. // Stat.link 方法会生成 ..x, ..y的字段类型，数值范围是 0-1
  63. edgeView.edge()
  64.   .position(Stat.link('source*target',nodes))
  65.   .color('#ccc');
  67. // 绘制节点
  68. var nodeView = chart.createView();
  69. nodeView.coord().reflect(); // 从上到下
  70. nodeView.axis(false);
  71. nodeView.source(nodes, defs);
  72. nodeView.point().position('x*y')
  73.   .size(10)
  74.   .label('name', {
  75.     offset: 0
  76.   })
  77.   .tooltip('name');

另外，在使用过程中可以从其他框架迁移相应的布局算法。