@antv/g6
Version:
graph visualization frame work
1 lines • 86.3 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-bd27e14581686018b099303732a4af33-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"简介\"><a href=\"#%E7%AE%80%E4%BB%8B\" aria-label=\"简介 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>简介</h2>\n<p>图布局是指图中节点的排布方式，根据图的数据结构不同，布局可以分为两类：一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成<a href=\"#FCFKL\">布局的参数、方法、数据的切换</a>等。</p>\n<p>除了内置布局方法外，一般图布局还支持 <a href=\"../advanced/custom-layout.zh\">自定义布局</a> 机制。</p>\n<p>事实上，G6 的布局是自由的，内置布局算法仅仅是操作了数据中节点的 <code class=\"language-text\">x</code> 和 <code class=\"language-text\">y</code> 值。因此，除了使用内置布局以及自定义的一般图布局外，用户还可以使用外部图布局算法，计算节点位置后赋值到数据中节点的 <code class=\"language-text\">x</code> 和 <code class=\"language-text\">y</code> 字段上，G6 便可以根据该位置信息进行绘制。</p>\n<p>本文将逐一介绍内置的布局算法，及其使用方式。</p>\n<h2 id=\"g6-布局方法总览\"><a href=\"#g6-%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95%E6%80%BB%E8%A7%88\" aria-label=\"g6 布局方法总览 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>G6 布局方法总览</h2>\n<h3 id=\"一般图-graph\"><a href=\"#%E4%B8%80%E8%88%AC%E5%9B%BE-graph\" aria-label=\"一般图 graph permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>一般图 Graph</h3>\n<ul>\n<li><a href=\"#AIkrd\">Random Layout</a>：随机布局；</li>\n<li><a href=\"#B6ZYA\">Force Layout</a>：经典力导向布局；</li>\n<li><a href=\"#TirhH\">Fruchterman Layout</a>：Fruchterman 布局，一种力导布局；</li>\n<li><a href=\"#0lVZj\">Circular Layout</a>：环形布局；</li>\n<li><a href=\"#lALX0\">Radial Layout</a>：辐射状布局；</li>\n<li><a href=\"#RBhhk\">MDS Layout</a>：高维数据降维算法布局；</li>\n<li><a href=\"#RUeWF\">Dagre Layout</a>：层次布局；</li>\n<li><a href=\"#4JMfP\">Concentric Layout</a>：同心圆布局；</li>\n<li><a href=\"#XG0RD\">Grid Layout</a>：网格布局。</li>\n</ul>\n<h3 id=\"树图-treegraph\"><a href=\"#%E6%A0%91%E5%9B%BE-treegraph\" aria-label=\"树图 treegraph permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>树图 TreeGraph</h3>\n<ul>\n<li><a href=\"#AyYPj\">CompactBox Layout</a>：紧凑树布局；</li>\n<li><a href=\"#sH1z0\">Dendrogram Layout</a>：树状布局（叶子节点布局对齐到同一层）；</li>\n<li><a href=\"#04ZZ5\">Intended Layout</a>：缩进布局；</li>\n<li><a href=\"#AOAs2\">Mindmap Layout</a>：脑图布局。</li>\n</ul>\n<h2 id=\"一般图-graph-1\"><a href=\"#%E4%B8%80%E8%88%AC%E5%9B%BE-graph-1\" aria-label=\"一般图 graph 1 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>一般图 Graph</h2>\n<h3 id=\"配置一般图布局\"><a href=\"#%E9%85%8D%E7%BD%AE%E4%B8%80%E8%88%AC%E5%9B%BE%E5%B8%83%E5%B1%80\" aria-label=\"配置一般图布局 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>配置一般图布局</h3>\n<p>用户可以通过在实例化图时使用图的配置项 <code class=\"language-text\">layout</code> 指定布局方法。下面代码在实例化图时设置了布局方法为 <code class=\"language-text\">type: 'force'</code>，即经典力导向图布局。并设置了参数 <code class=\"language-text\">preventOverlap: true</code> 和 <code class=\"language-text\">nodeSize: 30</code>，表示希望节点不重叠。节点大小 <code class=\"language-text\">nodeSize</code> 用于算法中判断节点是否重叠，更多配置项见 <a href=\"https://www.yuque.com/antv/g6/qopkkg#a73ba\" target=\"_self\" rel=\"nofollow\">Graph 各布局的配置项</a>。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置项</span>\n layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// Object，可选，布局的方法及其配置项，默认为 random 布局。</span>\n \ttype<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span>\n preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n nodeSize<span class=\"token punctuation\">:</span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>\n<p>当实例化图时没有配置布局时：</p>\n<ul>\n<li>若数据中节点有位置信息（<code class=\"language-text\">x</code> 和 <code class=\"language-text\">y</code>），则按照数据的位置信息进行绘制；</li>\n<li>若数据中节点没有位置信息，则默认使用 Random Layout 进行布局。</li>\n</ul>\n<h3 id=\"一般图布局方法\"><a href=\"#%E4%B8%80%E8%88%AC%E5%9B%BE%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95\" aria-label=\"一般图布局方法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>一般图布局方法</h3>\n<p>图布局通用 API：<a href=\"https://www.yuque.com/antv/g6/agbmu2\" target=\"_self\" rel=\"nofollow\">Layout API</a>。</p>\n<h4 id=\"random\"><a href=\"#random\" aria-label=\"random permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Random</h4>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883164107-fc95c5f2-3461-409f-b176-e28ad87f89a7.png#align=left&display=inline&height=141&name=image.png&originHeight=562&originWidth=846&search=&size=187661&status=done&width=213' width='600' height='400'/>\n<p><br /><strong>描述</strong>：随机布局。\n<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/nrxlhg\" target=\"_self\" rel=\"nofollow\">Random API</a>\n<br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>width</td>\n<td>Number</td>\n<td>300</td>\n<td>图的宽</td>\n<td></td>\n</tr>\n<tr>\n<td>height</td>\n<td>Number</td>\n<td>300</td>\n<td>图的高</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 id=\"force\"><a href=\"#force\" aria-label=\"force permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Force</h4>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883178937-a961fd60-e3f0-478c-b5d3-8e326fe18e6c.png#align=left&display=inline&height=180&name=image.png&originHeight=596&originWidth=959&search=&size=71243&status=done&width=289' width='600' height='400' />\n<p><br /> <strong>描述</strong>：经典力导向布局。\n<br /> <strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/rllgdl\" target=\"_self\" rel=\"nofollow\">Force API</a>\n<br /> <strong>参数</strong>：与 d3 的力导布局参数相对应。</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>linkDistance</td>\n<td>Number</td>\n<td>Function</td>\n<td>示例1: 50 <br />示例2:<br />d => {<br /> // d 是一条边<br /> if (d.id === 'edge1') {<br /> return 100;<br /> }<br /> return 50;<br />}</td>\n<td>50</td>\n</tr>\n<tr>\n<td>nodeStrength</td>\n<td>Number</td>\n<td>Function</td>\n<td>示例1: -30 <br />示例2:<br />d => {<br /> // d 是一个节点<br /> if (d.id === 'node1') {<br /> return -100;<br /> }<br /> return -30;<br />}</td>\n<td>null</td>\n</tr>\n<tr>\n<td>edgeStrength</td>\n<td>Number</td>\n<td>示例1: 1 <br />示例2:<br />d => {<br /> // d 是一个节点<br /> if (d.id === 'node1') {<br /> return 10;<br /> }<br /> return 1;<br />}</td>\n<td>null</td>\n<td>边的作用力，默认根据节点的出入度自适应。可以使用回调函数的形式对不同对节点定义不同边作用力（如示例2）</td>\n</tr>\n<tr>\n<td>preventOverlap</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>是否防止重叠，必须配合属性 <code class=\"language-text\">nodeSize</code> ，只有设置了与当前图节点大小相同的 <code class=\"language-text\">nodeSize</code> 值，才能够进行节点重叠的碰撞检测。若未设置 <code class=\"language-text\">nodeSize</code> ，则根据节点数据中的 <code class=\"language-text\">size</code> 进行碰撞检测。若二者都未设置，则默认以 10 为节点大小进行碰撞检测</td>\n</tr>\n<tr>\n<td>nodeSize</td>\n<td>Array</td>\n<td> Number</td>\n<td>20</td>\n<td>undefined</td>\n</tr>\n<tr>\n<td>nodeSpacing<br /><br />3.1.6 后支持</td>\n<td>Number</td>\n<td>Function</td>\n<td>示例 1 : 10<br />示例 2 : <br />d => {<br /> // d 是一个节点<br /> if (d.id === 'node1') {<br /> return 100;<br /> }<br /> return 10;<br />}</td>\n<td>0</td>\n</tr>\n<tr>\n<td>alphaDecay</td>\n<td>Number</td>\n<td>0.03</td>\n<td>0.028</td>\n<td>迭代阈值的衰减率。[0, 1]，0.028 对应迭代书为 300</td>\n</tr>\n<tr>\n<td>alphaMin</td>\n<td>Number</td>\n<td>0.03</td>\n<td>0.001</td>\n<td>停止迭代的阈值</td>\n</tr>\n<tr>\n<td>alpha</td>\n<td>Number</td>\n<td>0.1</td>\n<td>0.3</td>\n<td>当前阈值</td>\n</tr>\n<tr>\n<td>collideStrength</td>\n<td>Number</td>\n<td>0.8</td>\n<td>1</td>\n<td>防止重叠的力强度，[0, 1]。</td>\n</tr>\n<tr>\n<td>forceSimulation</td>\n<td>Object</td>\n<td></td>\n<td>null</td>\n<td>自定义 force 方法，若不指定，则使用 d3 的方法。</td>\n</tr>\n<tr>\n<td>onTick</td>\n<td>Function</td>\n<td></td>\n<td>{}</td>\n<td>每一次迭代的回调函数</td>\n</tr>\n<tr>\n<td>onLayoutEnd</td>\n<td>Function</td>\n<td></td>\n<td>{}</td>\n<td>布局完成后的回调函数</td>\n</tr>\n</tbody>\n</table>\n<h4 id=\"fruchterman\"><a href=\"#fruchterman\" aria-label=\"fruchterman permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Fruchterman</h4>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883212048-50bef140-5a93-463a-a763-c8dcc907af2c.png#align=left&display=inline&height=200&name=image.png&originHeight=650&originWidth=686&search=&size=242098&status=done&width=211' width='600' height='500' />\n<p><br /><strong>描述</strong>：Fruchterman 布局，一种力导布局。\n<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/vzqn07\" target=\"_self\" rel=\"nofollow\">Fruchterman API</a>\n<br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>maxIteration</td>\n<td>Number</td>\n<td>1000</td>\n<td>1000</td>\n<td>最大迭代次数</td>\n</tr>\n<tr>\n<td>gravity</td>\n<td>Number</td>\n<td>10</td>\n<td>10</td>\n<td>重力大小，影响布局的紧凑程度</td>\n</tr>\n<tr>\n<td>speed</td>\n<td>Number</td>\n<td>1</td>\n<td>1</td>\n<td>每次迭代节点移动的速度。速度太快可能会导致强烈震荡</td>\n</tr>\n<tr>\n<td>clustering</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>是否按照聚类布局</td>\n</tr>\n<tr>\n<td>clusterGravity</td>\n<td>Number</td>\n<td>30</td>\n<td>10</td>\n<td>聚类内部的重力大小，影响聚类的紧凑程度</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"0lVZj\"></a></p>\n<h4 id=\"circular\"><a href=\"#circular\" aria-label=\"circular permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Circular</h4>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883225141-27fe8b99-f365-47e4-827f-fc9da4319b19.png#align=left&display=inline&height=142&name=image.png&originHeight=456&originWidth=472&search=&size=130944&status=done&width=147' width='250' height='250' />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883232409-50dd7848-dfd6-42a4-9879-9b06b74e244c.png#align=left&display=inline&height=142&name=image.png&originHeight=472&originWidth=486&search=&size=128693&status=done&width=146' width='250' height='250' />\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883238564-ee51a954-82f8-4023-9ce9-fbdf26b31f5d.png#align=left&display=inline&height=141&name=image.png&originHeight=467&originWidth=400&search=&size=113276&status=done&width=121' width='250' height='250' />\n<p><br /><strong>描述</strong>：环形布局。\n<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/ml1qe3\" target=\"_self\" rel=\"nofollow\">Circular API</a>\n<br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例/可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>radius</td>\n<td>Number</td>\n<td>50</td>\n<td>null</td>\n<td>圆的半径。若设置了 radius，则 startRadius 与 endRadius 不生效</td>\n</tr>\n<tr>\n<td>startRadius</td>\n<td>Number</td>\n<td>10</td>\n<td>null</td>\n<td>螺旋状布局的起始半径</td>\n</tr>\n<tr>\n<td>endRadius</td>\n<td>Number</td>\n<td>100</td>\n<td>null</td>\n<td>螺旋状布局的结束半径</td>\n</tr>\n<tr>\n<td>clockwise</td>\n<td>Boolean</td>\n<td>true</td>\n<td>true</td>\n<td>是否顺时针排列</td>\n</tr>\n<tr>\n<td>divisions</td>\n<td>Number</td>\n<td>3</td>\n<td>1</td>\n<td>节点在环上的分段数（几个段将均匀分布），在 endRadius - startRadius != 0 时生效</td>\n</tr>\n<tr>\n<td>ordering</td>\n<td>String</td>\n<td>null</td>\n<td>'topology'</td>\n<td>'degree'</td>\n</tr>\n<tr>\n<td>angleRatio</td>\n<td>Number</td>\n<td>1</td>\n<td>1</td>\n<td>从第一个节点到最后节点之间相隔多少个 2*PI</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"lALX0\"></a></p>\n<h4 id=\"radial\"><a href=\"#radial\" aria-label=\"radial permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Radial</h4>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571883250046-b1986e95-78f7-476d-9b5d-36398ce344a0.png#align=left&display=inline&height=126&name=image.png&originHeight=428&originWidth=558&search=&size=213913&status=done&width=164' width='600' height='300' />\n<p><br /><strong>描述</strong>：辐射状布局。\n<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/ngp0vg#7ZOs7\" target=\"_self\" rel=\"nofollow\">Radial API</a>\n<br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>linkDistance</td>\n<td>Number</td>\n<td>50</td>\n<td>50</td>\n<td>边长</td>\n</tr>\n<tr>\n<td>maxIteration</td>\n<td>Number</td>\n<td>1000</td>\n<td>1000</td>\n<td>停止迭代到最大迭代数</td>\n</tr>\n<tr>\n<td>focusNode</td>\n<td>String</td>\n<td>Object</td>\n<td>'node1'</td>\n<td>null</td>\n</tr>\n<tr>\n<td>unitRadius</td>\n<td>Number</td>\n<td>10</td>\n<td>100</td>\n<td>每一圈距离上一圈的距离。默认填充整个画布，即根据图的大小决定</td>\n</tr>\n<tr>\n<td>preventOverlap</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>是否防止重叠，必须配合属性 <code class=\"language-text\">nodeSize</code> ，只有设置了与当前图节点大小相同的 <code class=\"language-text\">nodeSize</code> 值，才能够进行节点重叠的碰撞检测。<br />3.1.6 后支持：<br />若未设置 <code class=\"language-text\">nodeSize</code>，则将会根据数据中节点的 size 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。</td>\n</tr>\n<tr>\n<td>maxPreventOverlapIteration</td>\n<td>Number</td>\n<td>500</td>\n<td>200</td>\n<td>防止重叠步骤的最大迭代次数</td>\n</tr>\n<tr>\n<td>nodeSize</td>\n<td>Number</td>\n<td>10</td>\n<td>10</td>\n<td>节点大小（直径）。用于防止节点重叠时的碰撞检测。<br />3.1.6 后支持：<br />若未设置则使用数据中节点的 <code class=\"language-text\">size</code> 字段数值进行碰撞检测计算。若二者皆未设置，则以节点大小为 10 进行计算。</td>\n</tr>\n<tr>\n<td>nodeSpacing<br />3.1.6 后支持</td>\n<td>Number</td>\n<td>Function</td>\n<td>示例 1 : 10<br />示例 2 : <br />d => {<br /> // d 是一个节点<br /> if (d.id === 'node1') {<br /> return 100;<br /> }<br /> return 10;<br />}</td>\n<td>0</td>\n</tr>\n<tr>\n<td>strictRadial</td>\n<td>Boolean</td>\n<td>true</td>\n<td>false</td>\n<td>是否必须是严格的 radial 布局，即每一层的节点严格布局在一个环上。<code class=\"language-text\">preventOverlap</code> 为 <code class=\"language-text\">true</code> 时生效。详见 <a href=\"https://www.yuque.com/antv/g6/ngp0vg#7ZOs7\" target=\"_self\" rel=\"nofollow\">Radial-strictRadial API</a><br />- 当 <code class=\"language-text\">preventOverlap</code> 为 <code class=\"language-text\">true</code>，且 <code class=\"language-text\">strictRadial</code> 为 <code class=\"language-text\">false</code> 时，有重叠的节点严格沿着所在的环展开，但在一个环上若节点过多，可能无法完全避免节点重叠。<br />- 当 <code class=\"language-text\">preventOverlap</code> 为 <code class=\"language-text\">true</code>，且 <code class=\"language-text\">strictRadial</code> 为 <code class=\"language-text\">true</code> 时，允许同环上重叠的节点不严格沿着该环布局，可以在该环的前后偏移以避免重叠。<br /></td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"RBhhk\"></a></p>\n<h4 id=\"mds\"><a href=\"#mds\" aria-label=\"mds permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>MDS</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571883196380-9194f4b6-fb45-49c1-9a15-17e1c694a82f.png#align=left&display=inline&height=138&name=image.png&originHeight=549&originWidth=862&search=&size=134489&status=done&width=216\" alt=\"image.png\"><br /><strong>描述</strong>：高维数据降维算法布局。<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/kbvo7q\" target=\"_self\" rel=\"nofollow\">MDS API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>linkDistance</td>\n<td>Number</td>\n<td>50</td>\n<td>50</td>\n<td>边长</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"RUeWF\"></a></p>\n<h4 id=\"dagre\"><a href=\"#dagre\" aria-label=\"dagre permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Dagre</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571883264071-64862e9a-a850-499b-8063-253c3d380b76.png#align=left&display=inline&height=159&name=image.png&originHeight=567&originWidth=392&search=&size=45070&status=done&width=110\" alt=\"image.png\"><br /><strong>描述</strong>：层次布局。<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/fkhp3c\" target=\"_self\" rel=\"nofollow\">Dagre API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>rankdir</td>\n<td>String</td>\n<td>'TB' / 'BT' / 'LR' / 'RL'</td>\n<td>'TB'</td>\n<td>layout 的方向。T：top；B：bottom；L：left；R：right</td>\n</tr>\n<tr>\n<td>align</td>\n<td>String</td>\n<td>'UL' / 'UR' / 'DL' / 'DR'</td>\n<td>'UL'</td>\n<td>节点对齐方式。U：upper；D：down；L：left；R：right</td>\n</tr>\n<tr>\n<td>nodesep</td>\n<td>Number</td>\n<td>40</td>\n<td>50</td>\n<td>节点水平间距（px）。优先级高于 <code class=\"language-text\">nodesepFunc</code></td>\n</tr>\n<tr>\n<td>ranksep</td>\n<td>Number</td>\n<td>40</td>\n<td>50</td>\n<td>层间距（px）。优先级高于 <code class=\"language-text\">ranksep``Func</code></td>\n</tr>\n<tr>\n<td>nodesepFunc<br /><br />3.1.6 后支持</td>\n<td>Function</td>\n<td>d => {<br /> // d 是一个节点<br /> if (d.id === 'node1') {<br /> return 100;<br /> }<br /> return 10;<br />}</td>\n<td>undefined</td>\n<td>节点水平间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。优先级低于 <code class=\"language-text\">nodesep</code>，即若设置了 <code class=\"language-text\">nodesep</code>，则 <code class=\"language-text\">nodesepFunc</code> 不生效</td>\n</tr>\n<tr>\n<td>ranksepFunc<br /><br />3.1.6 后支持</td>\n<td>Function</td>\n<td>d => {<br /> // d 是一个节点<br /> if (d.id === 'node1') {<br /> return 100;<br /> }<br /> return 10;<br />}</td>\n<td>undefined</td>\n<td>层间距（px）的回调函数，通过该参数可以对不同节点设置不同的层间距。优先级低于 <code class=\"language-text\">ranksep</code>，即若设置了 <code class=\"language-text\">ranksep</code>，则 <code class=\"language-text\">ranksepFunc</code> 不生效</td>\n</tr>\n<tr>\n<td>controlPoints</td>\n<td>Boolean</td>\n<td>true</td>\n<td>true</td>\n<td>是否保留布局连线的控制点</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"4JMfP\"></a></p>\n<h4 id=\"concentric\"><a href=\"#concentric\" aria-label=\"concentric permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Concentric</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571883276351-a0d32bcb-7d1d-4a29-b2b6-f78345c8c752.png#align=left&display=inline&height=186&name=image.png&originHeight=694&originWidth=728&search=&size=268711&status=done&width=195\" alt=\"image.png\"><br />注：该算法参考 <a href=\"https://github.com/cytoscape/cytoscape.js\" target=\"_self\" rel=\"nofollow\">cytoscape.js</a>，遵守 MIT 开源协议。<br /><strong>描述</strong>：同心圆布局。<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/lx038n\" target=\"_self\" rel=\"nofollow\">Concentric API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>center</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>图的中心</td>\n<td>随机布局的中心</td>\n</tr>\n<tr>\n<td>nodeSize</td>\n<td>Number</td>\n<td>30</td>\n<td>30</td>\n<td>节点大小（直径）。用于防止节点重叠时的碰撞检测</td>\n</tr>\n<tr>\n<td>minNodeSpacing</td>\n<td>Number</td>\n<td>10</td>\n<td>10</td>\n<td>环与环之间最小间距，用于调整半径</td>\n</tr>\n<tr>\n<td>preventOverlap</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>是否防止重叠，必须配合属性 <code class=\"language-text\">nodeSize</code> ，只有设置了与当前图节点大小相同的 <code class=\"language-text\">nodeSize</code> 值，才能够进行节点重叠的碰撞检测。若未设置 <code class=\"language-text\">nodeSize</code> ，则将根据节点数据中的 <code class=\"language-text\">size</code> 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测</td>\n</tr>\n<tr>\n<td>sweep</td>\n<td>Number</td>\n<td>Math.PI</td>\n<td>undefined</td>\n<td>第一个节点与最后一个节点之间的弧度差</td>\n</tr>\n<tr>\n<td>equidistant</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>环与环之间的距离是否相等</td>\n</tr>\n<tr>\n<td>startAngle</td>\n<td>Number</td>\n<td>3.14</td>\n<td>3 / 2 * Math.PI</td>\n<td>开始放置节点的弧度</td>\n</tr>\n<tr>\n<td>clockwise</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>是否按照顺时针顺序</td>\n</tr>\n<tr>\n<td>maxLevelDiff</td>\n<td>Number</td>\n<td>0.5</td>\n<td>undefined</td>\n<td>每一层同心值的求和。若为 undefined，则将会被设置为 maxValue / 4 ，其中 maxValue 为最大的排序依据的属性值。例如，若 sortBy='degree'，则 maxValue 为所有节点中度数最大的节点的度数</td>\n</tr>\n<tr>\n<td>sortBy</td>\n<td>String</td>\n<td>'degree'</td>\n<td>'property1'</td>\n<td>'weight'</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"XG0RD\"></a></p>\n<h4 id=\"grid\"><a href=\"#grid\" aria-label=\"grid permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Grid</h4>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571883294360-430a03bf-82cf-4ebf-989e-ae0be742bf54.png#align=left&display=inline&height=151&name=image.png&originHeight=696&originWidth=1396&search=&size=529788&status=done&width=302\" alt=\"image.png\"><br />注：该算法参考 <a href=\"https://github.com/cytoscape/cytoscape.js\" target=\"_self\" rel=\"nofollow\">cytoscape.js</a>，遵守 MIT 开源协议。<br /><strong>描述</strong>：网格布局。<br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/wn4kg9\" target=\"_self\" rel=\"nofollow\">Grid API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>begin</td>\n<td>Array</td>\n<td>[ 0, 0 ]</td>\n<td>[ 0, 0 ]</td>\n<td>网格开始位置（左上角）</td>\n</tr>\n<tr>\n<td>preventOverlap</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>是否防止重叠，必须配合属性 <code class=\"language-text\">nodeSize</code> ，只有设置了与当前图节点大小相同的 <code class=\"language-text\">nodeSize</code> 值，才能够进行节点重叠的碰撞检测。若未设置 <code class=\"language-text\">nodeSize</code> ，则将根据节点数据中的 <code class=\"language-text\">size</code> 进行碰撞检测。若二者都未设置，则默认以 30 为节点大小进行碰撞检测</td>\n</tr>\n<tr>\n<td>preventOverlapPadding</td>\n<td>Number</td>\n<td>10</td>\n<td>10</td>\n<td>避免重叠时节点的间距 padding。preventOverlap 为 true 时生效</td>\n</tr>\n<tr>\n<td>nodeSize</td>\n<td>Number</td>\n<td>30</td>\n<td>30</td>\n<td>节点大小（直径）。用于防止节点重叠时的碰撞检测</td>\n</tr>\n<tr>\n<td>condense</td>\n<td>Boolean</td>\n<td>false</td>\n<td>false</td>\n<td>为 false 时表示利用所有可用画布空间，为 true 时表示利用最小的画布空间</td>\n</tr>\n<tr>\n<td>rows</td>\n<td>Number</td>\n<td>5</td>\n<td>undefined</td>\n<td>网格的行数，为 undefined 时算法根据节点数量、布局空间、cals（若指定）自动计算</td>\n</tr>\n<tr>\n<td>cals</td>\n<td>Number</td>\n<td>5</td>\n<td>undefined</td>\n<td>网格的列数，为 undefined 时算法根据节点数量、布局空间、rows（若指定）自动计算</td>\n</tr>\n<tr>\n<td>sortBy</td>\n<td>String</td>\n<td>'degree'</td>\n<td>'property1'</td>\n<td>'weight'</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"9ce7Y\"></a></p>\n<h2 id=\"树图-treegraph-1\"><a href=\"#%E6%A0%91%E5%9B%BE-treegraph-1\" aria-label=\"树图 treegraph 1 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>树图 TreeGraph</h2>\n<p>由于树图特殊性，G6扩展出了 TreeGraph ，详细文档请见：<a href=\"https://www.yuque.com/antv/g6/treegraph\" target=\"_self\" rel=\"nofollow\">TreeGraph</a> API。树布局是一种能很好展示有一定层次结构数据的布局方式。推荐使用 G6.TreeGraph 实现。</p>\n<p><a name=\"rzsBE\"></a></p>\n<h3 id=\"配置树图布局\"><a href=\"#%E9%85%8D%E7%BD%AE%E6%A0%91%E5%9B%BE%E5%B8%83%E5%B1%80\" aria-label=\"配置树图布局 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>配置树图布局</h3>\n<p>与一般图 Graph 配置方法相似，通过实例化图时配置 <code class=\"language-text\">layout</code> 属性设置树的布局，还可以通过 <code class=\"language-text\">modes</code> 属性为树配置 <a href=\"https://www.yuque.com/antv/g6/treegraph#157b6823\" target=\"_self\" rel=\"nofollow\">展开/收缩行为</a>。以下代码声明了一个实例，定义了布局为从左到右结构的基础树图，并且定义了展开收缩行为。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>TreeGraph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 定义展开/收缩行为</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'collapse-expand'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 定义布局</span>\n layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'dendrogram'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 布局类型</span>\n direction<span class=\"token punctuation\">:</span> <span class=\"token string\">'LR'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 自左至右布局，可选的有 H / V / LR / RL / TB / BT</span>\n nodeSep<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 节点之间间距</span>\n rankSep<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 每个层级之间的间距</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><a name=\"T3idk\"></a></p>\n<h3 id=\"\"><a href=\"#\" aria-label=\" permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a></h3>\n<p><a name=\"af7yc\"></a></p>\n<h3 id=\"树图布局方法\"><a href=\"#%E6%A0%91%E5%9B%BE%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95\" aria-label=\"树图布局方法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>树图布局方法</h3>\n<p><a name=\"AyYPj\"></a></p>\n<h4 id=\"compactbox\"><a href=\"#compactbox\" aria-label=\"compactbox permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>compactBox</h4>\n<p><strong>描述</strong>：紧凑树布局。从根节点开始，同一深度的节点在同一层，并且布局时会将节点大小考虑进去。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/174835/1551166323476-178c0e50-0999-4b07-ab72-a61f779cce28.png#align=left&display=inline&height=166&name=compact-box.png&originHeight=687&originWidth=1916&search=&size=53500&status=done&width=464\" alt=\"compact-box.png\"><br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/rufc7b\" target=\"_self\" rel=\"nofollow\">CompactBox API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>direction</td>\n<td>String</td>\n<td>'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V'</td>\n<td>'LR'</td>\n<td>layout 的方向。<br />- TB —— 根节点在上，往下布局<br />- BT —— 根节点在下，往上布局<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833657395-7b291d7b-5408-41fa-bfb6-533ef39250ad.png#align=left&display=inline&height=59&name=image.png&originHeight=744&originWidth=1786&search=&size=397159&status=done&width=141\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833676794-31f862f3-8cb5-412e-81d4-2ac246e37c0d.png#align=left&display=inline&height=60&name=image.png&originHeight=762&originWidth=1790&search=&size=390312&status=done&width=140\" alt=\"image.png\">> <br />（左）TB。（右）BT。<br />- LR —— 根节点在左，往右布局<br />- RL —— 根节点在右，往左布局<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833574730-5d76d7a2-0e82-4ef7-a7d9-a45efd5b6b30.png#align=left&display=inline&height=119&name=image.png&originHeight=906&originWidth=518&search=&size=164555&status=done&width=68\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833593889-e98c6f6d-0c38-4408-a4c0-ba83d0bbba74.png#align=left&display=inline&height=115&name=image.png&originHeight=932&originWidth=454&search=&size=154391&status=done&width=56\" alt=\"image.png\">> <br />（左）LR。（右）RL。<br />- H —— 根节点在中间，水平对称布局<br />- V —— 根节点在中间，垂直对称布局<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833726277-822e5104-2189-4fe4-bcdc-7b43d183d541.png#align=left&display=inline&height=110&name=image.png&originHeight=906&originWidth=824&search=&size=226469&status=done&width=100\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833702068-8f409559-1765-4154-bd4d-bb782de8cd23.png#align=left&display=inline&height=92&name=image.png&originHeight=924&originWidth=1028&search=&size=314177&status=done&width=102\" alt=\"image.png\"><br />> （左）H。（右）V。</td>\n</tr>\n<tr>\n<td>getId</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return d.id;<br />}</td>\n<td>undefined</td>\n<td>节点 id 的回调函数</td>\n</tr>\n<tr>\n<td>getHeight</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 10;<br />}</td>\n<td>undefined</td>\n<td>节点高度的回调函数</td>\n</tr>\n<tr>\n<td>getWidth</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 20;<br />}</td>\n<td>undefined</td>\n<td>节点宽度的回调函数</td>\n</tr>\n<tr>\n<td>getVGap</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 100;<br />}</td>\n<td>undefined</td>\n<td>节点纵向间距的回调函数</td>\n</tr>\n<tr>\n<td>getHGap</td>\n<td>Function</td>\n<td>(d) => {<br />// d 是一个节点<br /> return 50;<br />}</td>\n<td>undefined</td>\n<td>节点横向间距的回调函数</td>\n</tr>\n<tr>\n<td>radial</td>\n<td>Boolean</td>\n<td>true</td>\n<td>false</td>\n<td>是否按照辐射状布局。若 <code class=\"language-text\">radial</code> 为 <code class=\"language-text\">true</code>，建议 <code class=\"language-text\">direction</code> 设置为 <code class=\"language-text\">'LR'</code> 或 <code class=\"language-text\">'RL'</code>：<img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833817425-f944eadd-fd68-4107-8425-81c1c9bd1ce4.png#align=left&display=inline&height=97&name=image.png&originHeight=886&originWidth=990&search=&size=213310&status=done&width=108\" alt=\"image.png\"></td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"sH1z0\"></a></p>\n<h4 id=\"dendrogram\"><a href=\"#dendrogram\" aria-label=\"dendrogram permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>dendrogram</h4>\n<p><strong>描述</strong>：生态树布局。不管数据的深度多少，总是叶节点对齐。不考虑节点大小，布局时将节点视为1个像素点。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/174835/1551166332942-ecdc3c6f-bcc3-48f4-aa64-c9b1a3a2ab67.png#align=left&display=inline&height=145&name=dendrogram-lr.png&originHeight=652&originWidth=888&search=&size=75483&status=done&width=198\" alt=\"dendrogram-lr.png\"><br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/co00r6\" target=\"_self\" rel=\"nofollow\">Dendrogram API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>direction</td>\n<td>String</td>\n<td>'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V'</td>\n<td>'LR'</td>\n<td>layout 的方向。<br />- TB —— 根节点在上，往下布局<br />- BT —— 根节点在下，往上布局<br /></td>\n</tr>\n</tbody>\n</table>\n<p><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832831947-89713eef-7898-446b-9edc-604ed63b77d4.png#align=left&display=inline&height=48&name=image.png&originHeight=760&originWidth=1784&search=&size=518414&status=done&width=112\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832849059-ada0d199-ca15-4ce0-83e0-de00f9482c0b.png#align=left&display=inline&height=50&name=image.png&originHeight=786&originWidth=1814&search=&size=517688&status=done&width=115\" alt=\"image.png\"><br />> （左）TB。（右）BT。</p>\n<ul>\n<li>LR —— 根节点在左，往右布局<br />- RL —— 根节点在右，往左布局<br />\n<img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832767625-ad86a4b6-dabb-4f53-9800-31bb3fef88c6.png#align=left&display=inline&height=114&name=image.png&originHeight=896&originWidth=408&search=&size=214689&status=done&width=52\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832804357-6b4c6e65-22fe-45b1-ab9f-bf954cdb0b13.png#align=left&display=inline&height=116&name=image.png&originHeight=912&originWidth=410&search=&size=213061&status=done&width=52\" alt=\"image.png\">> （左）LR。（右）RL。</li>\n<li>H —— 根节点在中间，水平对称布局<br />- V —— 根节点在中间，垂直对称布局<br />\n<img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832893099-55fa98c8-30f2-49c6-b582-76dd69de7b4a.png#align=left&display=inline&height=104&name=image.png&originHeight=892&originWidth=712&search=&size=279079&status=done&width=83\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571832910720-f3d479c3-b822-4123-b207-a81e22fad324.png#align=left&display=inline&height=91&name=image.png&originHeight=922&originWidth=1172&search=&size=366086&status=done&width=116\" alt=\"image.png\"><br />> （左）H。（右）V。 |\n| nodeSep | Number | 50 | 0 | 节点间距 |\n| rankSep | Number | 100 | 0 | 层与层之间的间距 |\n| radial | Boolean | true | false | 是否按照辐射状布局。若 <code class=\"language-text\">radial</code> 为 <code class=\"language-text\">true</code>，建议 <code class=\"language-text\">direction</code> 设置为 <code class=\"language-text\">'LR'</code> 或 <code class=\"language-text\">'RL'</code>：<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571833294684-7874d71d-fb44-4340-95d0-c03b56c67a18.png#align=left&display=inline&height=98&name=image.png&originHeight=926&originWidth=922&search=&size=286654&status=done&width=98\" alt=\"image.png\"> |</li>\n</ul>\n<p><a name=\"04ZZ5\"></a></p>\n<h4 id=\"indented\"><a href=\"#indented\" aria-label=\"indented permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>indented</h4>\n<p><strong>描述</strong>：缩进树布局。每个元素会占一行/一列。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/174835/1551172247854-99aa0e77-61f0-4b7e-8ab6-6d854fcd2396.png#align=left&display=inline&height=222&name=indented.png&originHeight=876&originWidth=497&search=&size=36070&status=done&width=126\" alt=\"indented.png\"></p>\n<p><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/hl4syb\" target=\"_self\" rel=\"nofollow\">Indented API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>direction</td>\n<td>String</td>\n<td>'LR' / 'RL' / 'H'</td>\n<td>'LR'</td>\n<td>layout 的方向。<br />'LR' —— 根节点在左，往右布局（下图左）<br />'RL' —— 根节点在右，往左布局（下图中）<br />'H' —— 根节点在中间，水平对称布局（下图右）<br /><img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571832031826-33f11b5c-3d7a-4767-89b0-1d7cb6f64510.png#align=left&display=inline&height=172&name=image.png&originHeight=908&originWidth=354&search=&size=141929&status=done&width=67' alt='indented1' width='80' /><img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571832083137-c38a3f7a-885e-4acf-954a-73fbeb822bde.png#align=left&display=inline&height=166&name=image.png&originHeight=890&originWidth=278&search=&size=133215&status=done&width=52' alt='indented2' width='60' /><img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571832100885-51d8526e-d530-4090-9f37-4fdd4f9e865a.png#align=left&display=inline&height=128&name=image.png&originHeight=910&originWidth=526&search=&size=205642&status=done&width=74' alt='indented3' width='120' /></td>\n</tr>\n<tr>\n<td>indent</td>\n<td>Number</td>\n<td>80</td>\n<td>20</td>\n<td>列间间距</td>\n</tr>\n<tr>\n<td>getHeight</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 10;<br />}</td>\n<td>undefined</td>\n<td>节点高度的回调函数</td>\n</tr>\n<tr>\n<td>getWidth</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 20;<br />}</td>\n<td>undefined</td>\n<td>节点宽度的回调函数</td>\n</tr>\n<tr>\n<td>getSide</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 'left';<br />}</td>\n<td>undefined</td>\n<td>节点放置在根节点左侧或右侧的回调函数，仅对与根节点直接相连的节点有效，设置后将会影响被设置节点的所有子孙节点</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"AOAs2\"></a></p>\n<h4 id=\"mindmap\"><a href=\"#mindmap\" aria-label=\"mindmap permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>mindmap</h4>\n<p><strong>描述</strong>：脑图布局。深度相同的节点将会被放置在同一层，与 compactBox 不同的是，布局不会考虑节点的大小。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571830487985-0c3dfc8c-fadd-4911-8ea4-1b4091a86538.png#align=left&display=inline&height=160&name=image.png&originHeight=906&originWidth=1266&search=&size=267710&status=done&width=223\" alt=\"image.png\"><br /><strong>API</strong>：<a href=\"https://www.yuque.com/antv/g6/wk3mh8\" target=\"_self\" rel=\"nofollow\">Mindmap API</a><br /><strong>参数</strong>：</p>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>示例 / 可选值</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>direction</td>\n<td>String</td>\n<td>'H' / 'V'</td>\n<td>'H'</td>\n<td>layout 的方向。<br />- H：horizontal（水平）—— 根节点的子节点分成两部分横向放置在根节点左右两侧<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571830487985-0c3dfc8c-fadd-4911-8ea4-1b4091a86538.png#align=left&display=inline&height=101&name=image.png&originHeight=906&originWidth=1266&search=&size=267710&status=done&width=141\" alt=\"image.png\"><br />- V：vertical （竖直）—— 将根节点的所有孩子纵向排列<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571830515639-e66a5347-09fe-4583-81d6-178aa6920f7b.png#align=left&display=inline&height=112&name=image.png&originHeight=920&originWidth=982&search=&size=252410&status=done&width=120\" alt=\"image.png\"></td>\n</tr>\n<tr>\n<td>getHeight</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 10;<br />}</td>\n<td>undefined</td>\n<td>节点高度的回调函数</td>\n</tr>\n<tr>\n<td>getWidth</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 20;<br />}</td>\n<td>undefined</td>\n<td>节点宽度的回调函数</td>\n</tr>\n<tr>\n<td>getVGap</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 100;<br />}</td>\n<td>18</td>\n<td>节点纵向间距的回调函数</td>\n</tr>\n<tr>\n<td>getHGap</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 50;<br />}</td>\n<td>18</td>\n<td>节点横向间距的回调函数</td>\n</tr>\n<tr>\n<td>getSide</td>\n<td>String</td>\n<td>Function</td>\n<td>(d) => {<br /> // d 是一个节点<br /> return 'left';<br />}</td>\n<td>'right'</td>\n</tr>\n</tbody>\n</table>\n<p><a name=\"FCFKL\"></a></p>\n<h2 id=\"布局的切换机制\"><a href=\"#%E5%B8%83%E5%B1%80%E7%9A%84%E5%88%87%E6%8D%A2%E6%9C%BA%E5%88%B6\" aria-label=\"布局的切换机制 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>布局的切换机制</h2>\n<p>G6 提供了两种关于布局的切换机制：</p>\n<ul>\n<li><code class=\"language-text\">updateLayout(params)</code>：布局方法或参数的切换</li>\n<li><code class=\"language-text\">changeData()</code>：数据的切换</li>\n</ul>\n<p><a name=\"zAoyl\"></a></p>\n<h3 id=\"布局方法或参数切换\"><a href=\"#%E5%B8%83%E5%B1%80%E6%96%B9%E6%B3%95%E6%88%96%E5%8F%82%E6%95%B0%E5%88%87%E6%8D%A2\" aria-label=\"布局方法或参数切换 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>布局方法或参数切换</h3>\n<p><strong>接口定义：</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">/**\n * 更换布局或布局参数\n * @param {String | object} cfg 新布局配置项\n * 若 cfg 为 String 或含有 type 字段，且与之前的布局方法不同时将会更换布局\n * 否则只是更新原有布局的参数\n */</span>\n<span class=\"token function\">updateLayout</span><span class=\"token punctuation\">(</span>cfg<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><strong>布局方法切换：</strong><br />若参数 <code class=\"language-text\">cfg</code> 为 <code class=\"language-text\">String</code> 或是含有 <code class=\"language-text\">type</code> 字段的对象，且与之前的布局方法名不同时将会更换布局。</p>\n<p><strong>布局参数切换：</strong><br />若参数 <code class=\"language-text\">cfg</code> 是对象且其中不含有 <code class=\"language-text\">type</code> 字段，或指定的布局方法名称与之前的布局方法相同，则保持原有布局方法，仅更新该布局的参数。</p>\n<p><a name=\"mC4a0\"></a></p>\n<h3 id=\"数据切换\"><a href=\"#%E6%95%B0%E6%8D%AE%E5%88%87%E6%8D%A2\" aria-label=\"数据切换 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>数据切换</h3>\n<p><strong>接口定义：</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">/**\n * 更改源数据，根据新数据重新渲染视图\n * @param {object} data 源数据\n * @return {object} this\n */</span>\n<span class=\"token function\">changeData</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p><a name=\"Rp5Wk\"></a></p>\n<h3 id=\"切换示例\"><a href=\"#%E5%88%87%E6%8D%A2%E7%A4%BA%E4%BE%8B\" aria-label=\"切换示例 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>切换示例</h3>\n<p><a name=\"X8sJ1\"></a></p>\n<h4 id=\"期待效果\"><a href=\"#%E6%9C%9F%E5%BE%85%E6%95%88%E6%9E%9C\" aria-label=\"期待效果 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>期待效果</h4>\n<p>初始化时使用默认 random 布局，2000 ms 后更换为允许节点重叠的 force 布局，4000 ms 后更换为不允许节点重叠的 force 布局，6000 ms 后更换数据为 <code class=\"language-text\">data2</code>。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569837754937-a1b91cef-8846-487f-a1cd-b5231fcf09a3.gif#align=left&display=inline&height=329&name=tutorial-layout.gif&originHeight=329&originWidth=440&search=&size=84736&status=done&width=440\" alt=\"tutorial-layout.gif\">\n<a name=\"6Wf0G\"></a></p>\n<h4 id=\"完整代码\"><a href=\"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81\" aria-label=\"完整代码 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>完整代码</h4>\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\"><!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Layout Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n <span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'3'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'3'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'4'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'4'</span> <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'3'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'4'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'3'</span> <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">const</span> data2 <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> id<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span> <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'1'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span> source<span class=\"token punctuation\">:</span> <span class=\"token string\">'0'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">:</span> <span class=\"token string\">'2'</span> <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n container<span class=\"token punctuation\">:</span> <span class=\"token string\">'mountNode'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// String | HTMLElement，必须，容器 id 或容器本身</span>\n width<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，必须，图的宽度</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Number，必须，图的高度</span>\n animate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span> <span class=\"token comment\">// Boolean，可选，切换布局时是否使用动画过度</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 读取数据和渲染</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 2000 ms 后切换为允许节点重叠的 force 布局</span>\n <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">updateLayout</span><span class=\"token punctuation\">(</span><span class=\"token string\">'force'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 参数为 String 代表布局名称</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">8000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 4000 ms 后切换为不允许节点重叠且边长为 100 的 force 布局。</span>\n <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">updateLayout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 布局名称</span>\n preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 布局参数，是否允许重叠</span>\n nodeSize<span class=\"token punctuation\">:</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 布局参数，节点大小，用于判断节点是否重叠</span>\n linkDistance<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span> <span class=\"token comment\">// 布局参数，边长</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 6000 ms 后切换数据为 data2</span>\n <span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">changeData</span><span class=\"token punctuation\">(</span>data2<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">12000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t\t</span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n\t<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>\n<p><a name=\"eYZc6\"></a></p>\n<h2 id=\"子图布局\"><a href=\"#%E5%AD%90%E5%9B%BE%E5%B8%83%E5%B1%80\" aria-label=\"子图布局 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>子图布局</h2>\n<p>目前，子图布局独立与全局布局的思路，与 graph 不挂钩，直接使用实例化布局方法的方式，灌入子图数据，通过布局将位置写到相应数据中。这种机制还可供外部的全局布局使用，即使不用 G6 渲染，也可以计算节点布局后的位置。但与萧庆讨论后，决定这种方式暂时不透出够用户。在子图布局上，这种机制后续需要修改，并与全局布局思路统一（ graph，controller ）。</p>\n<p><a name=\"KptLp\"></a></p>\n<h3 id=\"使用方法\"><a href=\"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95\" aria-label=\"使用方法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用方法</h3>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 实例化布局</span>\n<span class=\"token keyword\">const</span> subgraphLayout <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Layout</span><span class=\"token punctuation\">[</span><span class=\"token string\">'force'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">500</span><span class=\"token punctuation\">,</span> <span class=\"token number\">450</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 初始化布局，灌入子图数据</span>\nsubgraphLayout<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> subGraphNodes<span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> subGraphEdges<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">//执行布局</span>\nsubgraphLayout<span class=\"token punctuation\">.</span><span class=\"token function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 图实例根据数据更新节点位置</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">positionsAnimate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}