@antv/g6
Version:
graph visualization frame work
1 lines • 25.1 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-dc0bdb1acd7593cd28c56e882309f56a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"g6registernodenodename-options-extendnodename\"><a href=\"#g6registernodenodename-options-extendnodename\" aria-label=\"g6registernodenodename options extendnodename 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.registerNode(nodeName, options, extendNodeName)</h2>\n<p>当内置节点不满足需求时，可以通过<code class=\"language-text\">G6.registerNode(nodeName, options, extendNodeName)</code>方法自定义节点。</p>\n<p><strong>参数</strong></p>\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>nodeName</td>\n<td>string</td>\n<td>true</td>\n<td>自定义节点名称，需保持唯一性。</td>\n</tr>\n<tr>\n<td>options</td>\n<td>object</td>\n<td>true</td>\n<td>自定义节点时的配置项，配置项中包括完整的生命周期方法，具体请参考：<a href=\"./Shape\">Shape 文档</a>。</td>\n</tr>\n<tr>\n<td>extendNodeName</td>\n<td>string</td>\n<td>false</td>\n<td>自定义节点时可基于内置节点进行定义，该字段表示内置节点名称，所有内置节点请参考：<a href=\"../manual/middle/elements/defaultNode\">内置节点</a>。</td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerNode</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'nodeName'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">/**\n * 绘制节点/边，包含文本\n * @param {Object} cfg 节点的配置项\n * @param {G.Group} group 节点的容器\n * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到\n */</span>\n <span class=\"token function\">draw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 绘制后的附加操作，默认没有任何操作\n * @param {Object} cfg 节点的配置项\n * @param {G.Group} group 节点的容器\n */</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 更新节点，包含文本\n * @override\n * @param {Object} cfg 节点的配置项\n * @param {Node} node 节点\n */</span>\n <span class=\"token function\">update</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> node</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 更新节点后的操作，一般同 afterDraw 配合使用\n * @override\n * @param {Object} cfg 节点的配置项\n * @param {Node} node 节点\n */</span>\n <span class=\"token function\">afterUpdate</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> node</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现\n * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法\n * @param {String} name 状态名称\n * @param {Object} value 状态值\n * @param {Node} node 节点\n */</span>\n <span class=\"token function\">setState</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">name<span class=\"token punctuation\">,</span> value<span class=\"token punctuation\">,</span> node</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 获取控制点\n * @param {Object} cfg 节点、边的配置项\n * @return {Array|null} 控制点的数组,如果为 null，则没有控制点\n */</span>\n <span class=\"token function\">getAnchorPoints</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg</span><span class=\"token punctuation\">)</span> <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>\n <span class=\"token string\">'extendNodeName'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"g6registeredgeedgename-options-extendedgename\"><a href=\"#g6registeredgeedgename-options-extendedgename\" aria-label=\"g6registeredgeedgename options extendedgename 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.registerEdge(edgeName, options, extendEdgeName)</h2>\n<p>当内置的边不能满足需求时，可以通过<code class=\"language-text\">registerEdge(edgeName, options, extendEdgeName)</code>方法注册自定义的边。</p>\n<p><strong>参数</strong></p>\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>edgeName</td>\n<td>string</td>\n<td>true</td>\n<td>自定义边的名称</td>\n</tr>\n<tr>\n<td>options</td>\n<td>object</td>\n<td>true</td>\n<td>自定义边时的配置项，配置项中包括完整的生命周期方法，具体请参考：<a href=\"https://www.yuque.com/antv/g6/shape-api\" target=\"_self\" rel=\"nofollow\">Shape 文档</a>。</td>\n</tr>\n<tr>\n<td>extendEdgeName</td>\n<td>string</td>\n<td>false</td>\n<td>自定义边时可基于内置边进行定义，该字段表示内置边的名称，所有内置边请参考：<a href=\"https://www.yuque.com/antv/g6/default-node#QtRZ2\" target=\"_self\" rel=\"nofollow\">内置边</a>。</td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'edgeName'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">/**\n * 绘制节点/边，包含文本\n * @param {Object} cfg 节点的配置项\n * @param {G.Group} group 节点的容器\n * @return {G.Shape} 绘制的图形，通过node.get('keyShape') 可以获取到\n */</span>\n <span class=\"token function\">draw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 绘制后的附加操作，默认没有任何操作\n * @param {Object} cfg 节点的配置项\n * @param {G.Group} group 节点的容器\n */</span>\n <span class=\"token function\">afterDraw</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> group</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 更新节点，包含文本\n * @override\n * @param {Object} cfg 节点的配置项\n * @param {Node} node 节点\n */</span>\n <span class=\"token function\">update</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> node</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 更新节点后的操作，一般同 afterDraw 配合使用\n * @override\n * @param {Object} cfg 节点的配置项\n * @param {Node} node 节点\n */</span>\n <span class=\"token function\">afterUpdate</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg<span class=\"token punctuation\">,</span> node</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 设置节点的状态，主要是交互状态，业务状态请在 draw 方法中实现\n * 单图形的节点仅考虑 selected、active 状态，有其他状态需求的用户自己复写这个方法\n * @param {String} name 状态名称\n * @param {Object} value 状态值\n * @param {Node} node 节点\n */</span>\n <span class=\"token function\">setState</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">name<span class=\"token punctuation\">,</span> value<span class=\"token punctuation\">,</span> node</span><span class=\"token punctuation\">)</span> <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>\n <span class=\"token string\">'extendEdgeName'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"g6registerbehaviorbehaviorname-behavior\"><a href=\"#g6registerbehaviorbehaviorname-behavior\" aria-label=\"g6registerbehaviorbehaviorname behavior 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.registerBehavior(behaviorName, behavior)</h2>\n<p>当内置的 Behavior 不能满足需求时，使用<code class=\"language-text\">registerBehavior(behaviorName, behavior)</code>方法注册自定义的交互行为。</p>\n<p><strong>参数</strong></p>\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>behaviorName</td>\n<td>string</td>\n<td>true</td>\n<td>自定义 Behavior 的名称</td>\n</tr>\n<tr>\n<td>behavior</td>\n<td>object</td>\n<td>true</td>\n<td>自定义 behavior 时的配置项，配置项中包括的方法及作用具体请参考：<a href=\"https://www.yuque.com/antv/g6/behavior-api\" target=\"_self\" rel=\"nofollow\">Behavior 文档</a>。</td>\n</tr>\n</tbody>\n</table>\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\">// 注册自定义Behavior</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerBehavior</span><span class=\"token punctuation\">(</span><span class=\"token string\">'behaviorName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 设置事件及处理事件的回调之间的对应关系</span>\n <span class=\"token function\">getEvents</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">'node:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onClick'</span><span class=\"token punctuation\">,</span>\n mousemove<span class=\"token punctuation\">:</span> <span class=\"token string\">'onMousemove'</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'edge:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onEdgeClick'</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\">/**\n * 处理node:click事件的回调\n * @override\n * @param {Object} evt 事件句柄\n */</span>\n <span class=\"token function\">onClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> evt<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> evt<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> evt<span class=\"token punctuation\">.</span>y <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> model <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getModel</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 处理mousemove事件的回调\n * @override\n * @param {Object} evt 事件句柄\n */</span>\n <span class=\"token function\">onMousemove</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 处理:click事件的回调\n * @override\n * @param {Object} evt 事件句柄\n */</span>\n <span class=\"token function\">onEdgeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// TODO</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=\"g6registerlayoutlayoutname-layout\"><a href=\"#g6registerlayoutlayoutname-layout\" aria-label=\"g6registerlayoutlayoutname 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>G6.registerLayout(layoutName, layout)</h2>\n<p>当内置布局不满足需求时，可以通过 <code class=\"language-text\">G6.registerLayout(layoutName, layout)</code> 方法自定义布局。</p>\n<p><strong>参数</strong></p>\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>layoutName</td>\n<td>string</td>\n<td>true</td>\n<td>自定义布局名称</td>\n</tr>\n<tr>\n<td>layout</td>\n<td>object</td>\n<td>true</td>\n<td>自定义布局的配置项，配置项中包括的方法及作用具体请参考：<a href=\"https://www.yuque.com/antv/g6/agbmu2\" target=\"_self\" rel=\"nofollow\">Layout 文档</a>。</td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerLayout</span><span class=\"token punctuation\">(</span><span class=\"token string\">'layoutName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">/**\n * 定义自定义行为的默认参数，会与用户传入的参数进行合并\n */</span>\n <span class=\"token function\">getDefaultCfg</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <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>\n <span class=\"token comment\">/**\n * 初始化\n * @param {object} data 数据\n */</span>\n <span class=\"token function\">init</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">data</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> self <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span>nodes <span class=\"token operator\">=</span> data<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span>edges <span class=\"token operator\">=</span> data<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 执行布局\n */</span>\n <span class=\"token function\">execute</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 根据传入的数据进行布局\n * @param {object} data 数据\n */</span>\n <span class=\"token function\">layout</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">data</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> self <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span><span class=\"token function\">init</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n self<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 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">/**\n * 更新布局配置，但不执行布局\n * @param {object} cfg 需要更新的配置项\n */</span>\n <span class=\"token function\">updateCfg</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cfg</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> self <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n Util<span class=\"token punctuation\">.</span><span class=\"token function\">mix</span><span class=\"token punctuation\">(</span>self<span class=\"token punctuation\">,</span> cfg<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\">/**\n * 销毁\n */</span>\n <span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> self <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span>positions <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span>nodes <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span>edges <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n self<span class=\"token punctuation\">.</span>destroyed <span class=\"token operator\">=</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>"}