{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-7388a1e45496f11d0958f69146dfaec1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

G6 提供了一般图和树图的一些常用布局，使用方式参见：中级教程 使用布局 Layout，Layout API。当这些内置布局无法满足需求时，G6 还提供了一般图的自定义布局的机制，方便用户进行更定制化的扩展。

\n

  注意：\n树图暂时不支持自定义布局。

\n

本文将会通过自定义 Bigraph 布局的例子讲解自定义布局。

\n

自定义布局 API

\n

G6 中自定义布局的 API 如下：

\n
/**\n * 注册布局的方法\n * @param {string} type 布局类型，外部引用指定必须，不要与已有布局类型重名\n * @param {object} layout 布局方法\n */\nLayout.registerLayout = function(type, {\n  /**\n   * 定义自定义行为的默认参数，会与用户传入的参数进行合并\n   */\n  getDefaultCfg() {\n    return {};\n  },\n  /**\n   * 初始化\n   * @param {object} data 数据\n   */\n  init(data) {},\n  /**\n   * 执行布局\n   */\n  execute() {},\n  /**\n   * 根据传入的数据进行布局\n   * @param {object} data 数据\n   */\n  layout(data) {},\n  /**\n   * 更新布局配置，但不执行布局\n   * @param {object} cfg 需要更新的配置项\n   */\n  updateCfg(cfg) {},\n  /**\n   * 销毁\n   */\n  destroy() {},\n});
\n

自定义布局

\n

下面，我们将讲解如何自定义布局如下图的二分图 Bigraph。二分图只存在两部分节点之间的边，同属于一个部分的节点之间没有边。我们希望布局能够对两部分节点分别进行排序，减少边的交叉。

\nimg\n

该二分图数据如下，节点根据 cluster 字段分为 了 'part1' 和 'part2'，代表二分图的两部分。

\n
const data = {\n  nodes: [\n    { id: '0', label: 'A', cluster: 'part1' },\n    { id: '1', label: 'B', cluster: 'part1' },\n    { id: '2', label: 'C', cluster: 'part1' },\n    { id: '3', label: 'D', cluster: 'part1' },\n    { id: '4', label: 'E', cluster: 'part1' },\n    { id: '5', label: 'F', cluster: 'part1' },\n    { id: '6', label: 'a', cluster: 'part2' },\n    { id: '7', label: 'b', cluster: 'part2' },\n    { id: '8', label: 'c', cluster: 'part2' },\n    { id: '9', label: 'd', cluster: 'part2' },\n  ],\n  edges: [\n    { source: '0', target: '6' },\n    { source: '0', target: '7' },\n    { source: '0', target: '9' },\n    { source: '1', target: '6' },\n    { source: '1', target: '9' },\n    { source: '1', target: '7' },\n    { source: '2', target: '8' },\n    { source: '2', target: '9' },\n    { source: '2', target: '6' },\n    { source: '3', target: '8' },\n    { source: '4', target: '6' },\n    { source: '4', target: '7' },\n    { source: '5', target: '9' },\n  ],\n};\n
\n

需求分析

\n

为了减少边的交叉，可以通过排序，将 'part1' 的节点 A 对齐到所有与 A 相连的 'part2' 中的节点的平均中心；同样将 'part2' 中的节点 a 对齐到所有与 a 相连的 'part1' 中的节点的平均中心。可以描述成如下过程：

\n\n

实现

\n

下面代码展示了自定义名为 'bigraph-layout' 的二分图布局，完整代码参见：自定义布局-二分图。使用该布局的方式与使用内置布局方式相同，都是在实例化图时将其配置到 layout 配置项中，详见：使用布局 Layout。

\n
G6.registerLayout('bigraph-layout', {\n  // 默认参数\n  getDefaultCfg: function getDefaultCfg() {\n    return {\n      center: [0, 0], // 布局的中心\n      biSep: 100, // 两部分的间距\n      nodeSep: 20, // 同一部分的节点艰巨\n      direction: 'horizontal', // 两部分的分布方向\n      nodeSize: 20, // 节点大小\n    };\n  },\n  // 执行布局\n  execute: function execute() {\n    var self = this;\n    var center = self.center;\n    var biSep = self.biSep;\n    var nodeSep = self.nodeSep;\n    var nodeSize = self.nodeSize;\n    var part1Pos = 0,\n      part2Pos = 0;\n    // 若指定为横向分布\n    if (self.direction === 'horizontal') {\n      part1Pos = center[0] - biSep / 2;\n      part2Pos = center[0] + biSep / 2;\n    }\n    var nodes = self.nodes;\n    var edges = self.edges;\n    var part1Nodes = [];\n    var part2Nodes = [];\n    var part1NodeMap = new Map();\n    var part2NodeMap = new Map();\n    // separate the nodes and init the positions\n    nodes.forEach(function(node, i) {\n      if (node.cluster === 'part1') {\n        part1Nodes.push(node);\n        part1NodeMap.set(node.id, i);\n      } else {\n        part2Nodes.push(node);\n        part2NodeMap.set(node.id, i);\n      }\n    });\n\n    // 对 part1 的节点进行排序\n    part1Nodes.forEach(function(p1n) {\n      var index = 0;\n      var adjCount = 0;\n      edges.forEach(function(edge) {\n        var sourceId = edge.source;\n        var targetId = edge.target;\n        if (sourceId === p1n.id) {\n          index += part2NodeMap.get(targetId);\n          adjCount++;\n        } else if (targetId === p1n.id) {\n          index += part2NodeMap.get(sourceId);\n          adjCount++;\n        }\n      });\n      index /= adjCount;\n      p1n.index = index;\n    });\n    part1Nodes.sort(function(a, b) {\n      return a.index - b.index;\n    });\n\n    // 对 part2 的节点进行排序\n    part2Nodes.forEach(function(p2n) {\n      var index = 0;\n      var adjCount = 0;\n      edges.forEach(function(edge) {\n        var sourceId = edge.source;\n        var targetId = edge.target;\n        if (sourceId === p2n.id) {\n          index += part1NodeMap.get(targetId);\n          adjCount++;\n        } else if (targetId === p2n.id) {\n          index += part1NodeMap.get(sourceId);\n          adjCount++;\n        }\n      });\n      index /= adjCount;\n      p2n.index = index;\n    });\n    part2Nodes.sort(function(a, b) {\n      return a.index - b.index;\n    });\n\n    // 放置节点\n    var hLength =\n      part1Nodes.length > part2Nodes.length\n        ? part1Nodes.length\n        : part2Nodes.length;\n    var height = hLength * (nodeSep + nodeSize);\n    var begin = center[1] - height / 2;\n    if (self.direction === 'vertical') {\n      begin = center[0] - height / 2;\n    }\n    part1Nodes.forEach(function(p1n, i) {\n      if (self.direction === 'horizontal') {\n        p1n.x = part1Pos;\n        p1n.y = begin + i * (nodeSep + nodeSize);\n      } else {\n        p1n.x = begin + i * (nodeSep + nodeSize);\n        p1n.y = part1Pos;\n      }\n    });\n    part2Nodes.forEach(function(p2n, i) {\n      if (self.direction === 'horizontal') {\n        p2n.x = part2Pos;\n        p2n.y = begin + i * (nodeSep + nodeSize);\n      } else {\n        p2n.x = begin + i * (nodeSep + nodeSize);\n        p2n.y = part2Pos;\n      }\n    });\n  },\n});\n
"}