UNPKG

@antv/g6

Version:

graph visualization frame work

github.com/antvis/g6

antvis/g6

1 lines • 37.3 kB
1
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-8d35378b8c39b7f4dd47cafca4297b4b-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>TreeGraph是G6专门为树图场景打造的图。TreeGraph继承自Graph。<code class=\"language-text\">G6.TreeGraph</code>与<code class=\"language-text\">G6.Graph</code>最大的区别就是数据结构和内置布局计算。主要出于以下考虑：</p>\n<ul>\n<li>\n<p>数据结构：树图的数据一般是嵌套结构，边的数据隐含在嵌套结构中，并不会特意指定edge。此布局要求数据中一个节点需要有<code class=\"language-text\">id</code>和<code class=\"language-text\">children</code>两个数据项，最精简的数据结构如下所示：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\nid<span class=\"token punctuation\">:</span> <span class=\"token string\">'root'</span><span class=\"token punctuation\">,</span>\nchildren<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n<span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'subTree1'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> \n<span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'subTree2'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span> \n<span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre></div>\n</li>\n<li>\n<p>布局特殊性：</p>\n<ul>\n<li>树图的布局算法一般是不改变源数据的，而是重新生成一份数据，将源数据作为新数据的一个属性。如果每次都需要做次遍历转换数据到节点和边的数据增加了用户的实现复杂度。</li>\n<li>树图的每次新增/删除/展开/收缩节点，都需要重新计算布局。遍历一份结构化数据对应到图上每个节点去做更新操作，也很麻烦。</li>\n</ul>\n</li>\n</ul>\n<h2 id=\"初始化\"><a href=\"#%E5%88%9D%E5%A7%8B%E5%8C%96\" 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<h3 id=\"g6treegraph\"><a href=\"#g6treegraph\" aria-label=\"g6treegraph 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.TreeGraph</h3>\n<p><strong>参数</strong>\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| layout | object | null | <strong>3.0.4 版本开始支持树布局算法配置</strong>。3.0.4 版本之前是 function 形式。建议开发者使用配置形式，操作粒度更细。 |\n| animate | boolean | true | 默认打开重布局动画开关。 |</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> treeGraph <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 width<span class=\"token punctuation\">:</span> <span class=\"token number\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</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 type<span class=\"token punctuation\">:</span> <span class=\"token string\">'collapse-expand'</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onChange</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">item<span class=\"token punctuation\">,</span> collapsed</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> icon <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">findByClassName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'collapse-icon'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>collapsed<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n icon<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'symbol'</span><span class=\"token punctuation\">,</span> <span class=\"token constant\">EXPAND_ICON</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n icon<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'symbol'</span><span class=\"token punctuation\">,</span> <span class=\"token constant\">COLLAPSE_ICON</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <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 string\">'drag-canvas'</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'zoom-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 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>\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>\n rankSep<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n radial<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</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><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"layout配置项\"><a href=\"#layout%E9%85%8D%E7%BD%AE%E9%A1%B9\" aria-label=\"layout配置项 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>layout配置项</h2>\n<p>layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式。</p>\n<h3 id=\"通用配置项\"><a href=\"#%E9%80%9A%E7%94%A8%E9%85%8D%E7%BD%AE%E9%A1%B9\" 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<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>类型</th>\n<th>默认值</th>\n<th>描述</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>dendrogram</td>\n<td>布局类型，支持dendrogram、compactBox、mindmap和indeted。</td>\n</tr>\n<tr>\n<td>direction</td>\n<td>string</td>\n<td>LR</td>\n<td>布局方向，有 <code class=\"language-text\">LR</code> , <code class=\"language-text\">RL</code> , <code class=\"language-text\">TB</code> , <code class=\"language-text\">BT</code> , <code class=\"language-text\">H</code> , <code class=\"language-text\">V</code> 可选。<br />L: 左； R: 右； T: 上； B：下； H: 垂直； V: 水平。</td>\n</tr>\n<tr>\n<td>getChildren</td>\n<td>Function</td>\n<td></td>\n<td>返回当前节点的所有子节点</td>\n</tr>\n</tbody>\n</table>\n<p>⚠️<strong>注意：</strong>当<code class=\"language-text\">type=indeted</code>时，<code class=\"language-text\">direction</code>只能取LR、RL和H这三个值。</p>\n<h3 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</h3>\n<p><strong>dendrogram示意图</strong>\n使用<code class=\"language-text\">dendrogram</code>方式布局时，<code class=\"language-text\">direction</code>取不同值时的效果如下所示。</p>\n<table>\n<thead>\n<tr>\n<th>LR</th>\n<th>RL</th>\n<th>H</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909423150-acf04d11-7016-49ae-a888-f90edb96adbd.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909423566-cca49639-6dab-43d0-bfac-5ed9b9197237.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909423225-ad3bb9b4-2119-4014-ae98-65e02185e95e.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n</tr>\n</tbody>\n</table>\n<table>\n<thead>\n<tr>\n<th>TB</th>\n<th>BT</th>\n<th>V</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909422368-c7b8499f-053b-497f-ad34-f45b8c2a5549.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909422252-07a6933e-93d8-490e-ae15-ed51e576d69a.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909422727-f14a4f4c-c326-4f3f-bea5-abae28867835.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n</tr>\n</tbody>\n</table>\n<p><strong>dendrogram配置项</strong>\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| nodeSep | number | 20 | 同层次节点之间的间距 |\n| rankSep | number | 200 | 相邻层级节点之间的间距 |\n| nodeSize | number | 20 | 节点大小 |\n| subTreeSep | number | 10 | 子树之间的间距 |\n| isHorizontal | boolean | true | 是否是水平方向，默认为水平方向 |</p>\n<h3 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</h3>\n<p><strong>compactBox示意图</strong>\n使用<code class=\"language-text\">compactBox</code>方式布局时，<code class=\"language-text\">direction</code>取不同值时的效果如下所示。</p>\n<table>\n<thead>\n<tr>\n<th>LR</th>\n<th>RL</th>\n<th>H</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909250873-b6b156b5-8edc-468c-bd8e-e1336a0c4589.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909251752-c5fef594-c0d5-4e0f-80e0-50ef0ad030d7.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909252469-d1429897-cbe0-4d1f-933e-f1da998e5057.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n</tr>\n</tbody>\n</table>\n<table>\n<thead>\n<tr>\n<th>TB</th>\n<th>BT</th>\n<th>V</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909252526-b8936ca5-0c10-475e-a695-c10d6719a9cf.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909253376-12485bcb-cf79-4036-9e34-9d8310622071.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560909250963-09c4db6e-5f67-49ea-a0ce-b922ad54548d.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n</tr>\n</tbody>\n</table>\n<p><strong>compactBox配置项</strong>\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| getId | Function | | 指定节点ID |\n| getHeight | Function | 36 | 指定节点高度 |\n| getWidth | Function | 18 | 指定节点宽度 |\n| getVGap | Function | 18 | 指定节点之间的垂直间距 |\n| getHGap | Function | 18 | 指定节点之间的水平间距 |</p>\n<p>⚠️<strong>注意：</strong>使用getWidth、getHeight、getVGap和getHGap指定节点的宽高及间距后，并不会改变节点的大小，具体原理如下所示：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">/*\n * Gaps: filling space between nodes\n * (x, y) ----------------------\n * | vgap |\n * | -------------------- h\n * | h | | e\n * | g | | i\n * | a | | g\n * | p | | h\n * | --------------------- t\n * | |\n * -----------width------------\n */</span>\n</code></pre></div>\n<p><strong>🦁以上原理同样适用于indented和mindmap布局。</strong></p>\n<h3 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</h3>\n<p><strong>indented示意图</strong>\n使用<code class=\"language-text\">indented</code>方式布局时，<code class=\"language-text\">direction</code>取不同值时的效果如下所示。</p>\n<table>\n<thead>\n<tr>\n<th>LR</th>\n<th>RL</th>\n<th>H</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560910055783-3783faed-29f0-4e34-9076-df951aa6ea10.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560910055615-54aaca32-7de4-471e-8600-611854094b90.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n<td><img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560910055676-86d316d8-9487-4b3d-99a4-27b4a8c091c0.png#align=left&display=inline&percent=0&size=0&status=done' width='230' height='100'></td>\n</tr>\n</tbody>\n</table>\n<p><strong>indented配置项</strong>\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| indent | number | 20 | 与直接父节点的缩进值 |\n| getVGap | Function | 18 | 指定节点之间的垂直间距 |\n| getHeight | Function | 36 | 指定节点的高度 |</p>\n<h3 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</h3>\n<p><strong>mindmap示意图</strong>\n<img src='https://intranetproxy.alipay.com/skylark/lark/0/2019/png/178530/1560908396116-af8c9bf3-ec9b-4a06-b32a-9c6be6ee927c.png#align=left&display=inline&height=327&name=image.png&originHeight=654&originWidth=1276&size=112648&status=done&width=638' width='750'></p>\n<p><strong>mindmap配置项</strong>\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| getId | Function | | 指定节点ID |\n| getHeight | Function | 36 | 指定节点高度 |\n| getWidth | Function | 18 | 指定节点宽度 |\n| getSide | Function | | 指定当前节点在主题的左边 (left) 还是右边 (right) |\n| getSubTreeSep | Function | 0 | 指定子节点之间的高度间隔 |\n| getVGap | Function | 18 | 指定节点的垂直间距 |\n| getHGap | Function | 18 | 指定节点的水平间距 |</p>\n<h2 id=\"更新\"><a href=\"#%E6%9B%B4%E6%96%B0\" 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<h3 id=\"addchilddata-parent\"><a href=\"#addchilddata-parent\" aria-label=\"addchilddata parent 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>addChild(data, parent)</h3>\n<p>在指定的父节点下添加子树。</p>\n<p><strong>参数</strong>\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | object | true | 子树的数据 |\n| parent | Node | string | true | 父节点或父节点ID |</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'sub1'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'subTree1'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> \n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'subTree2'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span> \n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\ntreeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">addChild</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">,</span> <span class=\"token string\">'root'</span><span class=\"token punctuation\">)</span></code></pre></div>\n<h3 id=\"updatechilddata-parent\"><a href=\"#updatechilddata-parent\" aria-label=\"updatechilddata parent 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>updateChild(data, parent)</h3>\n<p>更新数据，差量更新子树。</p>\n<p><strong>参数</strong>\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | object | true | 子树的数据 |\n| parent | Node | string | false | 父节点或父节点ID |</p>\n<p>⚠️<strong>注意：</strong>当parent参数为空时，则全量更新。</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'sub1'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'subTree1'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> \n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'subTree2'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span> \n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\ntreeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">updateChild</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">,</span> <span class=\"token string\">'root'</span><span class=\"token punctuation\">)</span></code></pre></div>\n<h3 id=\"removechildid\"><a href=\"#removechildid\" aria-label=\"removechildid 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>removeChild(id)</h3>\n<p>删除指定的子树。</p>\n<p><strong>参数</strong>\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | string | true | 要删除的子树的ID |</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">treeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeChild</span><span class=\"token punctuation\">(</span><span class=\"token string\">'sub'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"布局\"><a href=\"#%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<h3 id=\"changelayoutlayout\"><a href=\"#changelayoutlayout\" aria-label=\"changelayoutlayout 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>changeLayout(layout)</h3>\n<p>更改并应用指定的布局。</p>\n<p><strong>参数</strong>\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| layout | object | false | 指定的布局配置，如不传，则不做变更 |</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> layout <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'mindmap'</span><span class=\"token punctuation\">,</span>\n dirction<span class=\"token punctuation\">:</span> <span class=\"token string\">'H'</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">getSubTreeSep</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">getVGap</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token number\">25</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">getHeight</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">getWidth</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\ntreeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">changeLayout</span><span class=\"token punctuation\">(</span>layout<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"refreshlayoutfitview\"><a href=\"#refreshlayoutfitview\" aria-label=\"refreshlayoutfitview 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>refreshLayout(fitView)</h3>\n<p>数据变更后，重新布局，刷新视图，并更新到画布。</p>\n<p><strong>参数</strong>\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| fitView | boolean | false | 更新布局后，是否需要自适应窗口 |</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">treeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">refreshLayout</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"查找\"><a href=\"#%E6%9F%A5%E6%89%BE\" 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<h3 id=\"finddatabyidid-target\"><a href=\"#finddatabyidid-target\" aria-label=\"finddatabyidid target 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>findDataById(id, target)</h3>\n<p>根据指定的ID获取对应的源数据。</p>\n<p><strong>参数</strong>\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | string | true | 指定的元素ID |\n| target | object | false | 从指定的节点开始查找，为空时从根节点开始查找 |</p>\n<p><strong>返回值</strong></p>\n<ul>\n<li>返回值类型：object；</li>\n<li>返回值为查找到的节点的源数据。</li>\n</ul>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> target <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n\tid<span class=\"token punctuation\">:</span> <span class=\"token string\">'sub1'</span><span class=\"token punctuation\">,</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// 从target节点开始查找sub1.1节点</span>\n<span class=\"token keyword\">const</span> subData <span class=\"token operator\">=</span> treeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">findDataById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'sub1.1'</span><span class=\"token punctuation\">,</span> target<span class=\"token punctuation\">)</span>\n \n<span class=\"token comment\">// 从根节点开始查找sub1.1节点</span>\n<span class=\"token keyword\">const</span> subData <span class=\"token operator\">=</span> treeGraph<span class=\"token punctuation\">.</span><span class=\"token function\">findDataById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'sub1.1'</span><span class=\"token punctuation\">)</span></code></pre></div>"}