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

当数据中没有节点位置信息，或者数据中的位置信息不满足需求时，需要借助一些布局算法对图进行布局。G6 提供了 7 种一般图的布局和 4 种树图的布局：
一般图：

\n\n

树图布局：

\n\n

各种布局方法的具体介绍及其配置参见 Layout API。本教程中，我们使用的是力导向布局 (Force Layout)。
\"image.png\"

\n

取消自动适配画布

\n

我们在之前的教程里面，为了能够将超出画布的图适配到视野中，在实例化图时使用了 fitView 配置项。这节开始我们将会去掉这个特性。因为复杂的布局系统会打破适配的规则，反而会造成更多的困扰。让我们将相关的适配代码变为注释：

\n
const graph = new G6.Graph({\n  // ...\n  // fitView: true,\n  // fitViewPadding: [ 20, 40, 50, 20 ]\n});\n
\n

默认布局

\n

当实例化图时没有配置布局时：

\n\n

配置布局

\n

G6 使用布局的方式非常简单，在图实例化的时候，加上 layout 配置即可。下面代码在实例化图时设置了布局方法为 type: 'force'，即经典力导向图布局。并设置了参数 preventOverlap: true ，表示希望节点不重叠。力导向布局的更多配置项参见：Layout API。

\n
const graph = new G6.Graph({\n  ...                      // 其他配置项\n  layout: {                // Object，可选，布局的方法及其配置项，默认为 random 布局。\n    type: 'force',         // 指定为力导向布局\n    preventOverlap: true,  // 防止节点重叠\n    // nodeSize: 30        // 节点大小，用于算法中防止节点重叠时的碰撞检测。由于已经在上一节的元素配置中设置了每个节点的 size 属性，则不需要在此设置 nodeSize。\n  }\n});
\n

结果如下：
\"image.png\"

\n

如图所示，节点按照力导向布局自动平衡。但是图中的节点过于拥挤，边上的文字信息被挤占，无法看清。我们希望布局计算边的距离可以更长一些。G6 的力导向布局提供了 linkDistance 属性用来指定布局的时候边的距离长度：

\n
const graph = new G6.Graph({\n  // ...\n  layout: {\n    type: 'force',\n    preventOverlap: true,\n    linkDistance: 100, // 指定边距离为100\n  },\n});\n
\n

结果如下：
\"image.png\"

\n
\n

不同布局之间、相同布局不同参数允许动态切换和过渡，具体参见：布局切换。

\n
\n

 提示 
布局将在调用 graph.render() 时执行计算。

\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\n<div id=\"mountNode\"></div>\n<script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n<script>\n  const graph = new G6.Graph({\n    container: 'mountNode',\n    width: 800,\n    height: 600,\n    defaultNode: {\n      size: 30,\n      labelCfg: {\n        style: {\n          fill: '#fff'\n        }\n      }\n    },\n    defaultEdge: {\n      labelCfg: {\n        autoRotate: true\n      }\n    },\n    layout: {\n      type: 'force',            // 设置布局算法为 force\n      linkDistance: 100,        // 设置边长为 100\n      preventOverlap: true,     // 设置防止重叠\n    }\n  });\n  const main = async () => {\n    const response = await fetch(\n      'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n    );\n    const remoteData = await response.json();\n    \n    const nodes = remoteData.nodes;\n    const edges = remoteData.edges;\n    nodes.forEach(node => {\n      if (!node.style) {\n        node.style = {};\n      }\n      node.style.lineWidth = 1;\n      node.style.stroke = '#666';\n      node.style.fill = 'steelblue';\n      switch (node.class) {\n        case 'c0': {\n          node.shape = 'circle';\n          break;\n        }\n        case 'c1': {\n          node.shape = 'rect';\n          node.size = [ 35, 20 ];\n          break;\n        }\n        case 'c2': {\n          node.shape = 'ellipse';\n          node.size = [ 35, 20 ];\n          break;\n        }\n      }\n    });\n    edges.forEach(edge => {\n      if (!edge.style) {\n        edge.style = {};\n      }\n      edge.style.lineWidth = edge.weight;\n      edge.style.opacity = 0.6;\n      edge.style.stroke = 'grey';\n    });\n\n    graph.data(remoteData);\n    graph.render();\n  };\n  main();\n</script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

"}