{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-55a2e827b53cc5b585baaee86e86bf3c-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"G6 提供了一系列","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":10,"offset":10},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/internal-node","children":[{"type":"text","value":"内置节点","position":{"start":{"line":2,"column":11,"offset":11},"end":{"line":2,"column":15,"offset":15},"indent":[]}}],"position":{"start":{"line":2,"column":10,"offset":10},"end":{"line":2,"column":61,"offset":61},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，包括 ","position":{"start":{"line":2,"column":61,"offset":61},"end":{"line":2,"column":65,"offset":65},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/ckpk6v","children":[{"type":"text","value":"circle","position":{"start":{"line":2,"column":66,"offset":66},"end":{"line":2,"column":72,"offset":72},"indent":[]}}],"position":{"start":{"line":2,"column":65,"offset":65},"end":{"line":2,"column":111,"offset":111},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":111,"offset":111},"end":{"line":2,"column":112,"offset":112},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/vdqpdt","children":[{"type":"text","value":"rect","position":{"start":{"line":2,"column":113,"offset":113},"end":{"line":2,"column":117,"offset":117},"indent":[]}}],"position":{"start":{"line":2,"column":112,"offset":112},"end":{"line":2,"column":156,"offset":156},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":156,"offset":156},"end":{"line":2,"column":157,"offset":157},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/pxt157","children":[{"type":"text","value":"ellipse","position":{"start":{"line":2,"column":158,"offset":158},"end":{"line":2,"column":165,"offset":165},"indent":[]}}],"position":{"start":{"line":2,"column":157,"offset":157},"end":{"line":2,"column":204,"offset":204},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":204,"offset":204},"end":{"line":2,"column":205,"offset":205},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/ilnhgt","children":[{"type":"text","value":"diamond","position":{"start":{"line":2,"column":206,"offset":206},"end":{"line":2,"column":213,"offset":213},"indent":[]}}],"position":{"start":{"line":2,"column":205,"offset":205},"end":{"line":2,"column":252,"offset":252},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":252,"offset":252},"end":{"line":2,"column":253,"offset":253},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/sfcm38","children":[{"type":"text","value":"triangle","position":{"start":{"line":2,"column":254,"offset":254},"end":{"line":2,"column":262,"offset":262},"indent":[]}}],"position":{"start":{"line":2,"column":253,"offset":253},"end":{"line":2,"column":301,"offset":301},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":301,"offset":301},"end":{"line":2,"column":302,"offset":302},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/gwn2mq","children":[{"type":"text","value":"star","position":{"start":{"line":2,"column":303,"offset":303},"end":{"line":2,"column":307,"offset":307},"indent":[]}}],"position":{"start":{"line":2,"column":302,"offset":302},"end":{"line":2,"column":346,"offset":346},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":346,"offset":346},"end":{"line":2,"column":347,"offset":347},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/ng8a0q","children":[{"type":"text","value":"image","position":{"start":{"line":2,"column":348,"offset":348},"end":{"line":2,"column":353,"offset":353},"indent":[]}}],"position":{"start":{"line":2,"column":347,"offset":347},"end":{"line":2,"column":392,"offset":392},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"、","position":{"start":{"line":2,"column":392,"offset":392},"end":{"line":2,"column":393,"offset":393},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/sdfcpq","children":[{"type":"text","value":"modelRect","position":{"start":{"line":2,"column":394,"offset":394},"end":{"line":2,"column":403,"offset":403},"indent":[]}}],"position":{"start":{"line":2,"column":393,"offset":393},"end":{"line":2,"column":442,"offset":442},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。若内置节点无法满足需求，用户还可以通过 ","position":{"start":{"line":2,"column":442,"offset":442},"end":{"line":2,"column":463,"offset":463},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">G6.registerNode(&#39;nodeName&#39;, options)</code>","position":{"start":{"line":2,"column":463,"offset":463},"end":{"line":2,"column":501,"offset":501},"indent":[]}},{"type":"text","value":" 进行自定义节点，方便用户开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。","position":{"start":{"line":2,"column":501,"offset":501},"end":{"line":2,"column":554,"offset":554},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":554,"offset":554},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在本章中我们会通过四个案例，从简单到复杂讲解节点的自定义。这四个案例是：\n","position":{"start":{"line":4,"column":1,"offset":556},"end":{"line":5,"column":1,"offset":593},"indent":[1]}},{"type":"html","value":"<br />","position":{"start":{"line":5,"column":1,"offset":593},"end":{"line":5,"column":7,"offset":599},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":5,"column":7,"offset":599},"end":{"line":6,"column":1,"offset":600},"indent":[1]}},{"type":"html","value":"<strong>","position":{"start":{"line":6,"column":1,"offset":600},"end":{"line":6,"column":9,"offset":608},"indent":[]}},{"type":"text","value":"1. 从无到有的定义节点：","position":{"start":{"line":6,"column":9,"offset":608},"end":{"line":6,"column":22,"offset":621},"indent":[]}},{"type":"html","value":"</strong>","position":{"start":{"line":6,"column":22,"offset":621},"end":{"line":6,"column":31,"offset":630},"indent":[]}},{"type":"text","value":"绘制图形；优化性能。\n","position":{"start":{"line":6,"column":31,"offset":630},"end":{"line":7,"column":1,"offset":641},"indent":[1]}},{"type":"html","value":"<br />","position":{"start":{"line":7,"column":1,"offset":641},"end":{"line":7,"column":7,"offset":647},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":7,"column":7,"offset":647},"end":{"line":8,"column":1,"offset":648},"indent":[1]}},{"type":"html","value":"<strong>","position":{"start":{"line":8,"column":1,"offset":648},"end":{"line":8,"column":9,"offset":656},"indent":[]}},{"type":"text","value":"2. 扩展现有的节点：","position":{"start":{"line":8,"column":9,"offset":656},"end":{"line":8,"column":20,"offset":667},"indent":[]}},{"type":"html","value":"</strong>","position":{"start":{"line":8,"column":20,"offset":667},"end":{"line":8,"column":29,"offset":676},"indent":[]}},{"type":"text","value":"附加图形；增加动画。\n","position":{"start":{"line":8,"column":29,"offset":676},"end":{"line":9,"column":1,"offset":687},"indent":[1]}},{"type":"html","value":"<br />","position":{"start":{"line":9,"column":1,"offset":687},"end":{"line":9,"column":7,"offset":693},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":9,"column":7,"offset":693},"end":{"line":10,"column":1,"offset":694},"indent":[1]}},{"type":"html","value":"<strong>","position":{"start":{"line":10,"column":1,"offset":694},"end":{"line":10,"column":9,"offset":702},"indent":[]}},{"type":"text","value":"3. 调整节点的锚点；","position":{"start":{"line":10,"column":9,"offset":702},"end":{"line":10,"column":20,"offset":713},"indent":[]}},{"type":"html","value":"</strong>","position":{"start":{"line":10,"column":20,"offset":713},"end":{"line":10,"column":29,"offset":722},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":10,"column":29,"offset":722},"end":{"line":11,"column":1,"offset":723},"indent":[1]}},{"type":"html","value":"<br />","position":{"start":{"line":11,"column":1,"offset":723},"end":{"line":11,"column":7,"offset":729},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":11,"column":7,"offset":729},"end":{"line":12,"column":1,"offset":730},"indent":[1]}},{"type":"html","value":"<strong>","position":{"start":{"line":12,"column":1,"offset":730},"end":{"line":12,"column":9,"offset":738},"indent":[]}},{"type":"text","value":"4. 调整节点的鼠标选中/悬浮样式。","position":{"start":{"line":12,"column":9,"offset":738},"end":{"line":12,"column":27,"offset":756},"indent":[]}},{"type":"html","value":"</strong>","position":{"start":{"line":12,"column":27,"offset":756},"end":{"line":12,"column":36,"offset":765},"indent":[]}},{"type":"text","value":"样式变化响应；动画响应。","position":{"start":{"line":12,"column":36,"offset":765},"end":{"line":12,"column":48,"offset":777},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":556},"end":{"line":12,"column":48,"offset":777},"indent":[1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"通过 ","position":{"start":{"line":14,"column":1,"offset":779},"end":{"line":14,"column":4,"offset":782},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/shape-crycle","children":[{"type":"text","value":"图形 Shape","position":{"start":{"line":14,"column":5,"offset":783},"end":{"line":14,"column":13,"offset":791},"indent":[]}}],"position":{"start":{"line":14,"column":4,"offset":782},"end":{"line":14,"column":58,"offset":836},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 章节的学习，我们应该已经知道了自定义节点时需要满足以下两点：","position":{"start":{"line":14,"column":58,"offset":836},"end":{"line":14,"column":89,"offset":867},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":779},"end":{"line":14,"column":89,"offset":867},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"控制节点的生命周期；","position":{"start":{"line":16,"column":3,"offset":871},"end":{"line":16,"column":13,"offset":881},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":871},"end":{"line":16,"column":13,"offset":881},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":869},"end":{"line":16,"column":13,"offset":881},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"解析用户输入的数据，在图形上展示。","position":{"start":{"line":17,"column":3,"offset":884},"end":{"line":17,"column":20,"offset":901},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":884},"end":{"line":17,"column":20,"offset":901},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":882},"end":{"line":17,"column":20,"offset":901},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":869},"end":{"line":17,"column":20,"offset":901},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"G6 中自定义节点的 API 如下：","position":{"start":{"line":19,"column":1,"offset":903},"end":{"line":19,"column":19,"offset":921},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":903},"end":{"line":19,"column":19,"offset":921},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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    options<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      stateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        hover<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        selected<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 punctuation\">}</span><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  extendNodeName<span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":20,"column":1,"offset":922},"end":{"line":71,"column":4,"offset":2005},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"html","value":"<span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\">","position":{"start":{"line":73,"column":1,"offset":2007},"end":{"line":73,"column":77,"offset":2083},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":73,"column":77,"offset":2083},"end":{"line":73,"column":78,"offset":2084},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":73,"column":78,"offset":2084},"end":{"line":73,"column":84,"offset":2090},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":73,"column":84,"offset":2090},"end":{"line":73,"column":90,"offset":2096},"indent":[]}},{"type":"text","value":"注意：","position":{"start":{"line":73,"column":90,"offset":2096},"end":{"line":73,"column":93,"offset":2099},"indent":[]}},{"type":"html","value":"</span>","position":{"start":{"line":73,"column":93,"offset":2099},"end":{"line":73,"column":100,"offset":2106},"indent":[]}}],"position":{"start":{"line":73,"column":1,"offset":2007},"end":{"line":73,"column":100,"offset":2106},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"如果不从任何现有的节点扩展新节点时，","position":{"start":{"line":75,"column":3,"offset":2110},"end":{"line":75,"column":21,"offset":2128},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":75,"column":21,"offset":2128},"end":{"line":75,"column":27,"offset":2134},"indent":[]}},{"type":"text","value":" 方法是必须的；","position":{"start":{"line":75,"column":27,"offset":2134},"end":{"line":75,"column":35,"offset":2142},"indent":[]}}],"position":{"start":{"line":75,"column":3,"offset":2110},"end":{"line":75,"column":35,"offset":2142},"indent":[]}}],"position":{"start":{"line":75,"column":1,"offset":2108},"end":{"line":75,"column":35,"offset":2142},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">update</code>","position":{"start":{"line":76,"column":3,"offset":2145},"end":{"line":76,"column":11,"offset":2153},"indent":[]}},{"type":"text","value":" 方法可以不定义，数据更新时会走 draw 方法，所有图形清除重绘；","position":{"start":{"line":76,"column":11,"offset":2153},"end":{"line":76,"column":45,"offset":2187},"indent":[]}}],"position":{"start":{"line":76,"column":3,"offset":2145},"end":{"line":76,"column":45,"offset":2187},"indent":[]}}],"position":{"start":{"line":76,"column":1,"offset":2143},"end":{"line":76,"column":45,"offset":2187},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":77,"column":3,"offset":2190},"end":{"line":77,"column":14,"offset":2201},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":77,"column":14,"offset":2201},"end":{"line":77,"column":15,"offset":2202},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">afterUpdate</code>","position":{"start":{"line":77,"column":15,"offset":2202},"end":{"line":77,"column":28,"offset":2215},"indent":[]}},{"type":"text","value":" 方法一般用于扩展已有的节点/和边，例如：在矩形上附加图片，线上增加动画等；","position":{"start":{"line":77,"column":28,"offset":2215},"end":{"line":77,"column":66,"offset":2253},"indent":[]}}],"position":{"start":{"line":77,"column":3,"offset":2190},"end":{"line":77,"column":66,"offset":2253},"indent":[]}}],"position":{"start":{"line":77,"column":1,"offset":2188},"end":{"line":77,"column":66,"offset":2253},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":78,"column":3,"offset":2256},"end":{"line":78,"column":13,"offset":2266},"indent":[]}},{"type":"text","value":" 方法一般也不需要复写，有全局的样式可以替换；","position":{"start":{"line":78,"column":13,"offset":2266},"end":{"line":78,"column":36,"offset":2289},"indent":[]}}],"position":{"start":{"line":78,"column":3,"offset":2256},"end":{"line":78,"column":36,"offset":2289},"indent":[]}}],"position":{"start":{"line":78,"column":1,"offset":2254},"end":{"line":78,"column":36,"offset":2289},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">getAnchorPoints</code>","position":{"start":{"line":79,"column":3,"offset":2292},"end":{"line":79,"column":20,"offset":2309},"indent":[]}},{"type":"text","value":" 方法仅在需要限制与边的连接点时才需要复写，也可以在数据中直接指定。","position":{"start":{"line":79,"column":20,"offset":2309},"end":{"line":79,"column":54,"offset":2343},"indent":[]}}],"position":{"start":{"line":79,"column":3,"offset":2292},"end":{"line":79,"column":54,"offset":2343},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":2290},"end":{"line":79,"column":54,"offset":2343},"indent":[]}}],"position":{"start":{"line":75,"column":1,"offset":2108},"end":{"line":79,"column":54,"offset":2343},"indent":[1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#1-从无到有定义节点","title":null,"children":[],"data":{"hProperties":{"aria-label":"1 从无到有定义节点 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"1. 从无到有定义节点","position":{"start":{"line":82,"column":4,"offset":2349},"end":{"line":82,"column":15,"offset":2360},"indent":[]}}],"position":{"start":{"line":82,"column":1,"offset":2346},"end":{"line":82,"column":15,"offset":2360},"indent":[]},"data":{"id":"1-从无到有定义节点","htmlAttributes":{"id":"1-从无到有定义节点"},"hProperties":{"id":"1-从无到有定义节点"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#绘制图形","title":null,"children":[],"data":{"hProperties":{"aria-label":"绘制图形 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"绘制图形","position":{"start":{"line":83,"column":5,"offset":2365},"end":{"line":83,"column":9,"offset":2369},"indent":[]}}],"position":{"start":{"line":83,"column":1,"offset":2361},"end":{"line":83,"column":9,"offset":2369},"indent":[]},"data":{"id":"绘制图形","htmlAttributes":{"id":"绘制图形"},"hProperties":{"id":"绘制图形"}}},{"type":"paragraph","children":[{"type":"text","value":"我们自己来实现一个菱形的节点，如下图所示。","position":{"start":{"line":84,"column":1,"offset":2370},"end":{"line":84,"column":22,"offset":2391},"indent":[]}}],"position":{"start":{"line":84,"column":1,"offset":2370},"end":{"line":84,"column":22,"offset":2391},"indent":[]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"G6 有内置的菱形节点 diamond。为了演示，这里实现了一个自定义的菱形，相当于复写了内置的 diamond。","position":{"start":{"line":85,"column":3,"offset":2394},"end":{"line":85,"column":60,"offset":2451},"indent":[]}}],"position":{"start":{"line":85,"column":3,"offset":2394},"end":{"line":85,"column":60,"offset":2451},"indent":[]}}],"position":{"start":{"line":85,"column":1,"offset":2392},"end":{"line":85,"column":60,"offset":2451},"indent":[]}},{"type":"html","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1547800411703-21526827-77b6-4e0e-b302-4c5506ba2c21.png#align=left&display=inline&height=149&name=image.png&originHeight=149&originWidth=98&search=&size=1225&status=done&width=98' alt='img' width='80'/>","position":{"start":{"line":87,"column":1,"offset":2453},"end":{"line":87,"column":257,"offset":2709},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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><span class=\"token string\">'diamond'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</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>\n    <span class=\"token comment\">// 如果 cfg 中定义了 style 需要同这里的属性进行融合</span>\n    <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'path'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n      attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        path<span class=\"token punctuation\">:</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">getPath</span><span class=\"token punctuation\">(</span>cfg<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 根据配置获取路径</span>\n        stroke<span class=\"token punctuation\">:</span> cfg<span class=\"token punctuation\">.</span>color<span class=\"token punctuation\">,</span> <span class=\"token comment\">// 颜色应用到边上，如果应用到填充，则使用 fill: cfg.color</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    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>cfg<span class=\"token punctuation\">.</span>label<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// 如果有文本</span>\n      <span class=\"token comment\">// 如果需要复杂的文本配置项，可以通过 labeCfg 传入</span>\n      <span class=\"token comment\">// const style = (cfg.labelCfg &amp;&amp; cfg.labelCfg.style) || {};</span>\n      <span class=\"token comment\">// style.text = cfg.label;</span>\n      group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'text'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// attrs: style</span>\n        attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          x<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 居中</span>\n          y<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n          textAlign<span class=\"token punctuation\">:</span> <span class=\"token string\">'center'</span><span class=\"token punctuation\">,</span>\n          textBaseline<span class=\"token punctuation\">:</span> <span class=\"token string\">'middle'</span><span class=\"token punctuation\">,</span>\n          text<span class=\"token punctuation\">:</span> cfg<span class=\"token punctuation\">.</span>label<span class=\"token punctuation\">,</span>\n          fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#666'</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    <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">return</span> shape<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// 返回菱形的路径</span>\n  <span class=\"token function\">getPath</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> size <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size <span class=\"token operator\">||</span> <span class=\"token punctuation\">[</span><span class=\"token number\">40</span><span class=\"token punctuation\">,</span> <span class=\"token number\">40</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 如果没有 size 时的默认大小</span>\n    <span class=\"token keyword\">const</span> width <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> height <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">//  / 1 \\</span>\n    <span class=\"token comment\">// 4     2</span>\n    <span class=\"token comment\">//  \\ 3 /</span>\n    <span class=\"token keyword\">const</span> path <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span> <span class=\"token operator\">-</span> height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 上部顶点</span>\n      <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> width <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 右侧顶点</span>\n      <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 下部顶点</span>\n      <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span>width <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 左侧顶点</span>\n      <span class=\"token punctuation\">[</span><span class=\"token string\">'Z'</span><span class=\"token punctuation\">]</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 keyword\">return</span> path<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>","position":{"start":{"line":89,"column":1,"offset":2711},"end":{"line":135,"column":4,"offset":3842},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"上面的代码自定义了一个菱形节点，然后我们使用下面的数据输入就会绘制出 diamond 这个节点。","position":{"start":{"line":137,"column":1,"offset":3844},"end":{"line":137,"column":49,"offset":3892},"indent":[]}}],"position":{"start":{"line":137,"column":1,"offset":3844},"end":{"line":137,"column":49,"offset":3892},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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  nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'diamond'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 最简单的</span>\n    <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> <span class=\"token number\">150</span><span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'diamond'</span><span class=\"token punctuation\">,</span> size<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">50</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 添加宽高</span>\n    <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> <span class=\"token number\">250</span><span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> color<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span><span class=\"token punctuation\">,</span> shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'diamond'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 添加颜色</span>\n    <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> <span class=\"token number\">350</span><span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> label<span class=\"token punctuation\">:</span> <span class=\"token string\">'菱形'</span><span class=\"token punctuation\">,</span> shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'diamond'</span> <span class=\"token punctuation\">}</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>\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>\n  width<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n  height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<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>\ngraph<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</code></pre></div>","position":{"start":{"line":138,"column":1,"offset":3893},"end":{"line":154,"column":4,"offset":4292},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"html","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1547800367691-7ab91993-2ea9-45fe-bb2e-7ab97aa6a76d.png#align=left&display=inline&height=140&name=image.png&originHeight=140&originWidth=394&search=&size=4559&status=done&width=394' alt='img' width='300'/>","position":{"start":{"line":156,"column":1,"offset":4294},"end":{"line":156,"column":260,"offset":4553},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#优化性能","title":null,"children":[],"data":{"hProperties":{"aria-label":"优化性能 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"优化性能","position":{"start":{"line":158,"column":5,"offset":4559},"end":{"line":158,"column":9,"offset":4563},"indent":[]}}],"position":{"start":{"line":158,"column":1,"offset":4555},"end":{"line":158,"column":9,"offset":4563},"indent":[]},"data":{"id":"优化性能","htmlAttributes":{"id":"优化性能"},"hProperties":{"id":"优化性能"}}},{"type":"paragraph","children":[{"type":"text","value":"当图中节点或边通过 ","position":{"start":{"line":159,"column":1,"offset":4564},"end":{"line":159,"column":11,"offset":4574},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.update(item, cfg)</code>","position":{"start":{"line":159,"column":11,"offset":4574},"end":{"line":159,"column":36,"offset":4599},"indent":[]}},{"type":"text","value":" 重绘时，默认情况下会调用节点的 ","position":{"start":{"line":159,"column":36,"offset":4599},"end":{"line":159,"column":53,"offset":4616},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":159,"column":53,"offset":4616},"end":{"line":159,"column":59,"offset":4622},"indent":[]}},{"type":"text","value":" 方法进行重新绘制。在数据量大或节点上图形数量非常多（特别是文本多）的情况下，","position":{"start":{"line":159,"column":59,"offset":4622},"end":{"line":159,"column":98,"offset":4661},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":159,"column":98,"offset":4661},"end":{"line":159,"column":104,"offset":4667},"indent":[]}},{"type":"text","value":" 方法中对所有图形、赋予样式将会非常消耗性能。","position":{"start":{"line":159,"column":104,"offset":4667},"end":{"line":159,"column":127,"offset":4690},"indent":[]}}],"position":{"start":{"line":159,"column":1,"offset":4564},"end":{"line":159,"column":127,"offset":4690},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在自定义节点时，重写 ","position":{"start":{"line":161,"column":1,"offset":4692},"end":{"line":161,"column":12,"offset":4703},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">update</code>","position":{"start":{"line":161,"column":12,"offset":4703},"end":{"line":161,"column":20,"offset":4711},"indent":[]}},{"type":"text","value":" 方法，在更新时将会调用该方法替代 ","position":{"start":{"line":161,"column":20,"offset":4711},"end":{"line":161,"column":38,"offset":4729},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":161,"column":38,"offset":4729},"end":{"line":161,"column":44,"offset":4735},"indent":[]}},{"type":"text","value":"。我们可以在该方法中指定需要更新的图形，从而避免频繁调用 ","position":{"start":{"line":161,"column":44,"offset":4735},"end":{"line":161,"column":73,"offset":4764},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":161,"column":73,"offset":4764},"end":{"line":161,"column":79,"offset":4770},"indent":[]}},{"type":"text","value":" 、全量更新节点上的所有图形。当然，","position":{"start":{"line":161,"column":79,"offset":4770},"end":{"line":161,"column":97,"offset":4788},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">update</code>","position":{"start":{"line":161,"column":97,"offset":4788},"end":{"line":161,"column":105,"offset":4796},"indent":[]}},{"type":"text","value":" 方法是可选的，如果没有性能优化的需求可以不重写该方法。","position":{"start":{"line":161,"column":105,"offset":4796},"end":{"line":161,"column":133,"offset":4824},"indent":[]}}],"position":{"start":{"line":161,"column":1,"offset":4692},"end":{"line":161,"column":133,"offset":4824},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在实现 diamond 的过程中，重写 ","position":{"start":{"line":163,"column":1,"offset":4826},"end":{"line":163,"column":21,"offset":4846},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">update</code>","position":{"start":{"line":163,"column":21,"offset":4846},"end":{"line":163,"column":29,"offset":4854},"indent":[]}},{"type":"text","value":" 方法，找到需要更新的 shape 进行更新，从而优化性能。寻找需要更新的图形可以通过：","position":{"start":{"line":163,"column":29,"offset":4854},"end":{"line":163,"column":73,"offset":4898},"indent":[]}}],"position":{"start":{"line":163,"column":1,"offset":4826},"end":{"line":163,"column":73,"offset":4898},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">group.get(&#39;children&#39;)[0]</code>","position":{"start":{"line":165,"column":3,"offset":4902},"end":{"line":165,"column":29,"offset":4928},"indent":[]}},{"type":"text","value":" 找到 ","position":{"start":{"line":165,"column":29,"offset":4928},"end":{"line":165,"column":33,"offset":4932},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/shape-crycle#UNCAz","children":[{"type":"text","value":"关键图形 keyShape","position":{"start":{"line":165,"column":34,"offset":4933},"end":{"line":165,"column":47,"offset":4946},"indent":[]}}],"position":{"start":{"line":165,"column":33,"offset":4932},"end":{"line":165,"column":98,"offset":4997},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，也就是 ","position":{"start":{"line":165,"column":98,"offset":4997},"end":{"line":165,"column":103,"offset":5002},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":165,"column":103,"offset":5002},"end":{"line":165,"column":109,"offset":5008},"indent":[]}},{"type":"text","value":" 方法返回的 shape；","position":{"start":{"line":165,"column":109,"offset":5008},"end":{"line":165,"column":122,"offset":5021},"indent":[]}}],"position":{"start":{"line":165,"column":3,"offset":4902},"end":{"line":165,"column":122,"offset":5021},"indent":[]}}],"position":{"start":{"line":165,"column":1,"offset":4900},"end":{"line":165,"column":122,"offset":5021},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">group.get(&#39;children&#39;)[1]</code>","position":{"start":{"line":166,"column":3,"offset":5024},"end":{"line":166,"column":29,"offset":5050},"indent":[]}},{"type":"text","value":" 找到 label 图形。","position":{"start":{"line":166,"column":29,"offset":5050},"end":{"line":166,"column":42,"offset":5063},"indent":[]}}],"position":{"start":{"line":166,"column":3,"offset":5024},"end":{"line":166,"column":42,"offset":5063},"indent":[]}}],"position":{"start":{"line":166,"column":1,"offset":5022},"end":{"line":166,"column":42,"offset":5063},"indent":[]}}],"position":{"start":{"line":165,"column":1,"offset":4900},"end":{"line":166,"column":42,"offset":5063},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"下面代码仅更新了 diamond 的关键图形的路径和颜色。","position":{"start":{"line":168,"column":1,"offset":5065},"end":{"line":168,"column":30,"offset":5094},"indent":[]}}],"position":{"start":{"line":168,"column":1,"offset":5065},"end":{"line":168,"column":30,"offset":5094},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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><span class=\"token string\">'diamond'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</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>\n    <span class=\"token comment\">// ... // 见前面代码</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token function\">getPath</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 comment\">// ... // 见前面代码</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</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>\n    <span class=\"token keyword\">const</span> group <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getContainer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 获取容器</span>\n    <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 按照添加的顺序</span>\n    <span class=\"token keyword\">const</span> style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n      path<span class=\"token punctuation\">:</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">getPath</span><span class=\"token punctuation\">(</span>cfg<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      stroke<span class=\"token punctuation\">:</span> cfg<span class=\"token punctuation\">.</span>color<span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span>style<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 更新属性</span>\n    <span class=\"token comment\">// 更新文本的逻辑类似，但是需要考虑 cfg.label 是否存在的问题</span>\n    <span class=\"token comment\">// 通过 label.attr() 更新文本属性即可</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>","position":{"start":{"line":169,"column":1,"offset":5095},"end":{"line":189,"column":4,"offset":5547},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"html","value":"<br />","position":{"start":{"line":191,"column":1,"offset":5549},"end":{"line":191,"column":7,"offset":5555},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#2-扩展现有节点","title":null,"children":[],"data":{"hProperties":{"aria-label":"2 扩展现有节点 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"2. 扩展现有节点","position":{"start":{"line":193,"column":4,"offset":5560},"end":{"line":193,"column":13,"offset":5569},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":5557},"end":{"line":193,"column":13,"offset":5569},"indent":[]},"data":{"id":"2-扩展现有节点","htmlAttributes":{"id":"2-扩展现有节点"},"hProperties":{"id":"2-扩展现有节点"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#扩展-shape","title":null,"children":[],"data":{"hProperties":{"aria-label":"扩展 shape permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"扩展 Shape","position":{"start":{"line":194,"column":5,"offset":5574},"end":{"line":194,"column":13,"offset":5582},"indent":[]}}],"position":{"start":{"line":194,"column":1,"offset":5570},"end":{"line":194,"column":13,"offset":5582},"indent":[]},"data":{"id":"扩展-shape","htmlAttributes":{"id":"扩展-shape"},"hProperties":{"id":"扩展-shape"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 中已经","position":{"start":{"line":195,"column":1,"offset":5583},"end":{"line":195,"column":7,"offset":5589},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/internal-node","children":[{"type":"text","value":"内置了一些节点","position":{"start":{"line":195,"column":8,"offset":5590},"end":{"line":195,"column":15,"offset":5597},"indent":[]}}],"position":{"start":{"line":195,"column":7,"offset":5589},"end":{"line":195,"column":61,"offset":5643},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"，如果用户仅仅想对现有节点进行调整，复用原有的代码，则可以基于现有的节点进行扩展。同样实现 diamond ，可以基于 circle、ellipse、rect 等内置节点的进行扩展。","position":{"start":{"line":195,"column":61,"offset":5643},"end":{"line":195,"column":152,"offset":5734},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/antvis/g6/blob/dev3.0.0/src/shape/single-shape-mixin.js","children":[{"type":"text","value":"simple-shape","position":{"start":{"line":195,"column":153,"offset":5735},"end":{"line":195,"column":165,"offset":5747},"indent":[]}}],"position":{"start":{"line":195,"column":152,"offset":5734},"end":{"line":195,"column":242,"offset":5824},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 是这些内置节点图形的基类，也可以基于它进行扩展。","position":{"start":{"line":195,"column":242,"offset":5824},"end":{"line":195,"column":267,"offset":5849},"indent":[]}}],"position":{"start":{"line":195,"column":1,"offset":5583},"end":{"line":195,"column":267,"offset":5849},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"下面以基于 single-shape 为例进行扩展。","position":{"start":{"line":197,"column":1,"offset":5851},"end":{"line":197,"column":27,"offset":5877},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">draw</code>","position":{"start":{"line":197,"column":27,"offset":5877},"end":{"line":197,"column":33,"offset":5883},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":197,"column":33,"offset":5883},"end":{"line":197,"column":34,"offset":5884},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">update</code>","position":{"start":{"line":197,"column":34,"offset":5884},"end":{"line":197,"column":42,"offset":5892},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":197,"column":42,"offset":5892},"end":{"line":197,"column":43,"offset":5893},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":197,"column":43,"offset":5893},"end":{"line":197,"column":53,"offset":5903},"indent":[]}},{"type":"text","value":" 方法在 ","position":{"start":{"line":197,"column":53,"offset":5903},"end":{"line":197,"column":58,"offset":5908},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/antvis/g6/blob/dev3.0.0/src/shape/single-shape-mixin.js","children":[{"type":"text","value":"simple-shape ","position":{"start":{"line":197,"column":59,"offset":5909},"end":{"line":197,"column":72,"offset":5922},"indent":[]}}],"position":{"start":{"line":197,"column":58,"offset":5908},"end":{"line":197,"column":149,"offset":5999},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"中都有实现，这里仅需要复写 ","position":{"start":{"line":197,"column":149,"offset":5999},"end":{"line":197,"column":163,"offset":6013},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">getShapeStyle</code>","position":{"start":{"line":197,"column":163,"offset":6013},"end":{"line":197,"column":178,"offset":6028},"indent":[]}},{"type":"text","value":" 方法即可。返回的对象中包含自定义图形的路径和其他样式。","position":{"start":{"line":197,"column":178,"offset":6028},"end":{"line":197,"column":206,"offset":6056},"indent":[]}}],"position":{"start":{"line":197,"column":1,"offset":5851},"end":{"line":197,"column":206,"offset":6056},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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\">'diamond'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n    shapeType<span class=\"token punctuation\">:</span> <span class=\"token string\">'path'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// group.addShape 时需要指定的类型</span>\n    <span class=\"token function\">getShapeStyle</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> size <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">getSize</span><span class=\"token punctuation\">(</span>cfg<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 转换成 [width, height] 的模式</span>\n      <span class=\"token keyword\">const</span> color <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>color<span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> width <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> height <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n      <span class=\"token comment\">//  / 1 \\</span>\n      <span class=\"token comment\">// 4     2</span>\n      <span class=\"token comment\">//  \\ 3 /</span>\n      <span class=\"token keyword\">const</span> path <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span> <span class=\"token operator\">-</span> height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 上部顶点</span>\n        <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> width <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 右侧顶点</span>\n        <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 下部顶点</span>\n        <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span>width <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 左侧顶点</span>\n        <span class=\"token punctuation\">[</span><span class=\"token string\">'Z'</span><span class=\"token punctuation\">]</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 keyword\">const</span> style <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span><span class=\"token function\">mix</span><span class=\"token punctuation\">(</span>\n        <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          path<span class=\"token punctuation\">:</span> path<span class=\"token punctuation\">,</span>\n          stroke<span class=\"token punctuation\">:</span> color<span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        cfg<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">return</span> style<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\">// 注意这里继承了 'single-shape'</span>\n  <span class=\"token string\">'single-shape'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":198,"column":1,"offset":6057},"end":{"line":225,"column":4,"offset":6713},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#添加动画","title":null,"children":[],"data":{"hProperties":{"aria-label":"添加动画 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"添加动画","position":{"start":{"line":227,"column":5,"offset":6719},"end":{"line":227,"column":9,"offset":6723},"indent":[]}}],"position":{"start":{"line":227,"column":1,"offset":6715},"end":{"line":227,"column":9,"offset":6723},"indent":[]},"data":{"id":"添加动画","htmlAttributes":{"id":"添加动画"},"hProperties":{"id":"添加动画"}}},{"type":"paragraph","children":[{"type":"text","value":"通过 ","position":{"start":{"line":228,"column":1,"offset":6724},"end":{"line":228,"column":4,"offset":6727},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":228,"column":4,"offset":6727},"end":{"line":228,"column":15,"offset":6738},"indent":[]}},{"type":"text","value":" 同样可以实现扩展，下面我们来看一个节点的动画场景，如下图所示。","position":{"start":{"line":228,"column":15,"offset":6738},"end":{"line":228,"column":47,"offset":6770},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":228,"column":47,"offset":6770},"end":{"line":228,"column":53,"offset":6776},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":228,"column":53,"offset":6776},"end":{"line":229,"column":1,"offset":6777},"indent":[1]}},{"type":"html","value":"<img src='https://cdn.nlark.com/yuque/0/2019/gif/244306/1561463342269-eedcdb7f-a455-4b1d-a0d6-15eaba934ce5.gif#align=left&display=inline&height=110&name=%E6%89%A9%E5%B1%95%E5%8A%A8%E7%94%BB.gif&originHeight=110&originWidth=245&search=&size=21605&status=done&width=245' alt='img' width='350'/>","position":{"start":{"line":229,"column":1,"offset":6777},"end":{"line":229,"column":293,"offset":7069},"indent":[]}}],"position":{"start":{"line":228,"column":1,"offset":6724},"end":{"line":229,"column":293,"offset":7069},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"上面的动画效果，可以通过以下方式实现：","position":{"start":{"line":232,"column":1,"offset":7072},"end":{"line":232,"column":20,"offset":7091},"indent":[]}}],"position":{"start":{"line":232,"column":1,"offset":7072},"end":{"line":232,"column":20,"offset":7091},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"扩展内置的 rect，在 rect 中添加一个图形；","position":{"start":{"line":234,"column":3,"offset":7095},"end":{"line":234,"column":29,"offset":7121},"indent":[]}}],"position":{"start":{"line":234,"column":3,"offset":7095},"end":{"line":234,"column":29,"offset":7121},"indent":[]}}],"position":{"start":{"line":234,"column":1,"offset":7093},"end":{"line":234,"column":29,"offset":7121},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"反复执行新添加图形的旋转动画。","position":{"start":{"line":235,"column":3,"offset":7124},"end":{"line":235,"column":18,"offset":7139},"indent":[]}}],"position":{"start":{"line":235,"column":3,"offset":7124},"end":{"line":235,"column":18,"offset":7139},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 自定义一个名为 inner-animate 的节点</span>\n<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\">'inner-animate'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</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>\n      <span class=\"token keyword\">const</span> size <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>size<span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> width <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> <span class=\"token number\">14</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> height <span class=\"token operator\">=</span> size<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">-</span> <span class=\"token number\">14</span><span class=\"token punctuation\">;</span>\n      <span class=\"token comment\">// 添加图片</span>\n      <span class=\"token keyword\">const</span> image <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'image'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n        attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n          x<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span>width <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n          y<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span>height <span class=\"token operator\">/</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n          width<span class=\"token punctuation\">:</span> width<span class=\"token punctuation\">,</span>\n          height<span class=\"token punctuation\">:</span> height<span class=\"token punctuation\">,</span>\n          img<span class=\"token punctuation\">:</span> cfg<span class=\"token punctuation\">.</span>img<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      <span class=\"token comment\">// 执行旋转动画</span>\n      image<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token function\">onFrame</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ratio</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">const</span> matrix <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span>mat3<span class=\"token punctuation\">.</span><span class=\"token function\">create</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> toMatrix <span class=\"token operator\">=</span> Util<span class=\"token punctuation\">.</span><span class=\"token function\">transform</span><span class=\"token punctuation\">(</span>matrix<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n              <span class=\"token punctuation\">[</span><span class=\"token string\">'r'</span><span class=\"token punctuation\">,</span> ratio <span class=\"token operator\">*</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span> <span class=\"token operator\">*</span> <span class=\"token number\">2</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            <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n              matrix<span class=\"token punctuation\">:</span> toMatrix<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          repeat<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 number\">3000</span><span class=\"token punctuation\">,</span>\n        <span class=\"token string\">'easeCubic'</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 punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token comment\">// 继承了 rect 节点</span>\n  <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":236,"column":1,"offset":7140},"end":{"line":270,"column":4,"offset":7883},"indent":[1,1,3,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,3,1,1,1,1]}}],"position":{"start":{"line":235,"column":1,"offset":7122},"end":{"line":270,"column":4,"offset":7883},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":234,"column":1,"offset":7093},"end":{"line":270,"column":4,"offset":7883},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"更多关于动画的实现，请参考","position":{"start":{"line":272,"column":1,"offset":7885},"end":{"line":272,"column":14,"offset":7898},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/base-animate","children":[{"type":"text","value":"基础动画","position":{"start":{"line":272,"column":15,"offset":7899},"end":{"line":272,"column":19,"offset":7903},"indent":[]}}],"position":{"start":{"line":272,"column":14,"offset":7898},"end":{"line":272,"column":64,"offset":7948},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"章节。","position":{"start":{"line":272,"column":64,"offset":7948},"end":{"line":272,"column":67,"offset":7951},"indent":[]}}],"position":{"start":{"line":272,"column":1,"offset":7885},"end":{"line":272,"column":67,"offset":7951},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":274,"column":1,"offset":7953},"end":{"line":274,"column":7,"offset":7959},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#3-调整锚点-anchorpoint","title":null,"children":[],"data":{"hProperties":{"aria-label":"3 调整锚点 anchorpoint permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"3. 调整锚点 anchorPoint","position":{"start":{"line":276,"column":4,"offset":7964},"end":{"line":276,"column":23,"offset":7983},"indent":[]}}],"position":{"start":{"line":276,"column":1,"offset":7961},"end":{"line":276,"column":23,"offset":7983},"indent":[]},"data":{"id":"3-调整锚点-anchorpoint","htmlAttributes":{"id":"3-调整锚点-anchorpoint"},"hProperties":{"id":"3-调整锚点-anchorpoint"}}},{"type":"paragraph","children":[{"type":"text","value":"节点上的","position":{"start":{"line":277,"column":1,"offset":7984},"end":{"line":277,"column":5,"offset":7988},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/obgw81","children":[{"type":"text","value":"锚点 anchorPoint","position":{"start":{"line":277,"column":6,"offset":7989},"end":{"line":277,"column":20,"offset":8003},"indent":[]}}],"position":{"start":{"line":277,"column":5,"offset":7988},"end":{"line":277,"column":59,"offset":8042},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 作用是","position":{"start":{"line":277,"column":59,"offset":8042},"end":{"line":277,"column":63,"offset":8046},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"确定节点与边的相交的位置","position":{"start":{"line":277,"column":65,"offset":8048},"end":{"line":277,"column":77,"offset":8060},"indent":[]}}],"position":{"start":{"line":277,"column":63,"offset":8046},"end":{"line":277,"column":79,"offset":8062},"indent":[]}},{"type":"text","value":"，看下面的场景：","position":{"start":{"line":277,"column":79,"offset":8062},"end":{"line":277,"column":87,"offset":8070},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":277,"column":87,"offset":8070},"end":{"line":277,"column":93,"offset":8076},"indent":[]}}],"position":{"start":{"line":277,"column":1,"offset":7984},"end":{"line":277,"column":93,"offset":8076},"indent":[]}},{"type":"html","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1547802871432-746cdacb-8532-4f41-a6dd-7309dd10e282.png#align=left&display=inline&height=190&name=image.png&originHeight=190&originWidth=266&search=&size=3774&status=done&width=266' alt='img' width='200'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1547803111800-1d62e52a-cdd2-4323-9506-bb569ab7aa80.png#align=left&display=inline&height=210&name=image.png&originHeight=210&originWidth=314&search=&size=6036&status=done&width=314' alt='img' width='200'/>","position":{"start":{"line":279,"column":1,"offset":8078},"end":{"line":280,"column":260,"offset":8597},"indent":[1]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"（左）没有设置锚点时。（右）diamond 设置了锚点后。","position":{"start":{"line":282,"column":3,"offset":8601},"end":{"line":282,"column":32,"offset":8630},"indent":[]}}],"position":{"start":{"line":282,"column":3,"offset":8601},"end":{"line":282,"column":32,"offset":8630},"indent":[]}}],"position":{"start":{"line":282,"column":1,"offset":8599},"end":{"line":282,"column":32,"offset":8630},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"有两种方式来调整节点上的锚点：","position":{"start":{"line":285,"column":1,"offset":8633},"end":{"line":285,"column":16,"offset":8648},"indent":[]}}],"position":{"start":{"line":285,"column":1,"offset":8633},"end":{"line":285,"column":16,"offset":8648},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"在数据里面指定 ","position":{"start":{"line":287,"column":3,"offset":8652},"end":{"line":287,"column":11,"offset":8660},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">anchorPoints</code>","position":{"start":{"line":287,"column":11,"offset":8660},"end":{"line":287,"column":25,"offset":8674},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":287,"column":25,"offset":8674},"end":{"line":287,"column":26,"offset":8675},"indent":[]}}],"position":{"start":{"line":287,"column":3,"offset":8652},"end":{"line":287,"column":26,"offset":8675},"indent":[]}}],"position":{"start":{"line":287,"column":1,"offset":8650},"end":{"line":287,"column":26,"offset":8675},"indent":[]}}],"position":{"start":{"line":287,"column":1,"offset":8650},"end":{"line":287,"column":26,"offset":8675},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"      ","position":{"start":{"line":289,"column":1,"offset":8677},"end":{"line":289,"column":7,"offset":8683},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"适用场景：","position":{"start":{"line":289,"column":9,"offset":8685},"end":{"line":289,"column":14,"offset":8690},"indent":[]}}],"position":{"start":{"line":289,"column":7,"offset":8683},"end":{"line":289,"column":16,"offset":8692},"indent":[]}},{"type":"text","value":"可以为不同节点配置不同的锚点，更定制化。","position":{"start":{"line":289,"column":16,"offset":8692},"end":{"line":289,"column":36,"offset":8712},"indent":[]}}],"position":{"start":{"line":289,"column":1,"offset":8677},"end":{"line":289,"column":36,"offset":8712},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"自定义节点中通过 ","position":{"start":{"line":291,"column":3,"offset":8716},"end":{"line":291,"column":12,"offset":8725},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">getAnchorPoints</code>","position":{"start":{"line":291,"column":12,"offset":8725},"end":{"line":291,"column":29,"offset":8742},"indent":[]}},{"type":"text","value":" 方法指定锚点。","position":{"start":{"line":291,"column":29,"offset":8742},"end":{"line":291,"column":37,"offset":8750},"indent":[]}}],"position":{"start":{"line":291,"column":3,"offset":8716},"end":{"line":291,"column":37,"offset":8750},"indent":[]}}],"position":{"start":{"line":291,"column":1,"offset":8714},"end":{"line":291,"column":37,"offset":8750},"indent":[]}}],"position":{"start":{"line":291,"column":1,"offset":8714},"end":{"line":291,"column":37,"offset":8750},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"      ","position":{"start":{"line":293,"column":1,"offset":8752},"end":{"line":293,"column":7,"offset":8758},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"适用场景：","position":{"start":{"line":293,"column":9,"offset":8760},"end":{"line":293,"column":14,"offset":8765},"indent":[]}}],"position":{"start":{"line":293,"column":7,"offset":8758},"end":{"line":293,"column":16,"offset":8767},"indent":[]}},{"type":"text","value":"全局配置锚点，所有该自定义节点类型的节点都相同。","position":{"start":{"line":293,"column":16,"offset":8767},"end":{"line":293,"column":40,"offset":8791},"indent":[]}}],"position":{"start":{"line":293,"column":1,"offset":8752},"end":{"line":293,"column":40,"offset":8791},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#数据中指定锚点","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据中指定锚点 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"数据中指定锚点","position":{"start":{"line":295,"column":5,"offset":8797},"end":{"line":295,"column":12,"offset":8804},"indent":[]}}],"position":{"start":{"line":295,"column":1,"offset":8793},"end":{"line":295,"column":12,"offset":8804},"indent":[]},"data":{"id":"数据中指定锚点","htmlAttributes":{"id":"数据中指定锚点"},"hProperties":{"id":"数据中指定锚点"}}},{"type":"html","lang":"javascript","meta":null,"value":"<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  nodes<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\">'node1'</span><span class=\"token punctuation\">,</span>\n      x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n      y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n      anchorPoints<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 左侧中间</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</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>\n    <span class=\"token comment\">//...       // 其他节点</span>\n  <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <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>\n</code></pre></div>","position":{"start":{"line":296,"column":1,"offset":8805},"end":{"line":312,"column":4,"offset":9028},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#自定义时指定锚点","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义时指定锚点 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"自定义时指定锚点","position":{"start":{"line":314,"column":5,"offset":9034},"end":{"line":314,"column":13,"offset":9042},"indent":[]}}],"position":{"start":{"line":314,"column":1,"offset":9030},"end":{"line":314,"column":13,"offset":9042},"indent":[]},"data":{"id":"自定义时指定锚点","htmlAttributes":{"id":"自定义时指定锚点"},"hProperties":{"id":"自定义时指定锚点"}}},{"type":"html","lang":"javascript","meta":null,"value":"<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\">'diamond'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">//... // 其他方法</span>\n    <span class=\"token function\">getAnchorPoints</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 punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 左侧中间</span>\n        <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0.5</span><span class=\"token punctuation\">]</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>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":315,"column":1,"offset":9043},"end":{"line":325,"column":4,"offset":9211},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"html","value":"<br />","position":{"start":{"line":327,"column":1,"offset":9213},"end":{"line":327,"column":7,"offset":9219},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#4-调整状态样式","title":null,"children":[],"data":{"hProperties":{"aria-label":"4 调整状态样式 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<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>"}]}},{"type":"text","value":"4. 调整状态样式","position":{"start":{"line":329,"column":4,"offset":9224},"end":{"line":329,"column":13,"offset":9233},"indent":[]}}],"position":{"start":{"line":329,"column":1,"offset":9221},"end":{"line":329,"column":13,"offset":9233},"indent":[]},"data":{"id":"4-调整状态样式","htmlAttributes":{"id":"4-调整状态样式"},"hProperties":{"id":"4-调整状态样式"}}},{"type":"paragraph","children":[{"type":"text","value":"常见的交互都需要节点和边通过样式变化做出反馈，例如鼠标移动到节点上、点击选中节点/边、通过交互激活边上的交互等，都需要改变节点和边的样式，有两种方式来实现这种效果：","position":{"start":{"line":330,"column":1,"offset":9234},"end":{"line":330,"column":83,"offset":9316},"indent":[]}}],"position":{"start":{"line":330,"column":1,"offset":9234},"end":{"line":330,"column":83,"offset":9316},"indent":[]}},{"type":"list","ordered":true,"start":1,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"在数据上添加标志字段，在自定义 shape 过程中根据约定进行渲染；","position":{"start":{"line":332,"column":4,"offset":9321},"end":{"line":332,"column":38,"offset":9355},"indent":[]}}],"position":{"start":{"line":332,"column":4,"offset":9321},"end":{"line":332,"column":38,"offset":9355},"indent":[]}}],"position":{"start":{"line":332,"column":1,"offset":9318},"end":{"line":332,"column":38,"offset":9355},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"将交互状态同原始数据和绘制节点的逻辑分开，仅更新节点。","position":{"start":{"line":333,"column":4,"offset":9359},"end":{"line":333,"column":31,"offset":9386},"indent":[]}}],"position":{"start":{"line":333,"column":4,"offset":9359},"end":{"line":333,"column":31,"offset":9386},"indent":[]}}],"position":{"start":{"line":333,"column":1,"offset":9356},"end":{"line":333,"column":31,"offset":9386},"indent":[]}}],"position":{"start":{"line":332,"column":1,"offset":9318},"end":{"line":333,"column":31,"offset":9386},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"我们推荐用户使用第二种方式来实现节点的状态调整，可以通过以下方式来实现：","position":{"start":{"line":335,"column":1,"offset":9388},"end":{"line":335,"column":37,"offset":9424},"indent":[]}}],"position":{"start":{"line":335,"column":1,"offset":9388},"end":{"line":335,"column":37,"offset":9424},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"在 G6 中自定义节点/边时在 ","position":{"start":{"line":337,"column":3,"offset":9428},"end":{"line":337,"column":19,"offset":9444},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":337,"column":19,"offset":9444},"end":{"line":337,"column":29,"offset":9454},"indent":[]}},{"type":"text","value":" 方法中进行节点状态的设置；","position":{"start":{"line":337,"column":29,"offset":9454},"end":{"line":337,"column":43,"offset":9468},"indent":[]}}],"position":{"start":{"line":337,"column":3,"offset":9428},"end":{"line":337,"column":43,"offset":9468},"indent":[]}}],"position":{"start":{"line":337,"column":1,"offset":9426},"end":{"line":337,"column":43,"offset":9468},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"通过 ","position":{"start":{"line":338,"column":3,"offset":9471},"end":{"line":338,"column":6,"offset":9474},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.setItemState()</code>","position":{"start":{"line":338,"column":6,"offset":9474},"end":{"line":338,"column":28,"offset":9496},"indent":[]}},{"type":"text","value":" 方法来设置状态。","position":{"start":{"line":338,"column":28,"offset":9496},"end":{"line":338,"column":37,"offset":9505},"indent":[]}}],"position":{"start":{"line":338,"column":3,"offset":9471},"end":{"line":338,"column":37,"offset":9505},"indent":[]}}],"position":{"start":{"line":338,"column":1,"offset":9469},"end":{"line":338,"column":37,"offset":9505},"indent":[]}}],"position":{"start":{"line":337,"column":1,"offset":9426},"end":{"line":338,"column":37,"offset":9505},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"基于 rect 扩展出一个 custom 图形，默认填充色为白色，当鼠标点击时变成红色，实现这一效果的示例代码如下：","position":{"start":{"line":340,"column":1,"offset":9507},"end":{"line":340,"column":59,"offset":9565},"indent":[]}}],"position":{"start":{"line":340,"column":1,"offset":9507},"end":{"line":340,"column":59,"offset":9565},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 基于 rect 扩展出新的图形</span>\n<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\">'custom'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// 设置状态</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> item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">const</span> group <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">getContainer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 顺序根据 draw 时确定</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>name <span class=\"token operator\">===</span> <span class=\"token string\">'selected'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n          shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'fill'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'red'</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          shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'fill'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'white'</span><span class=\"token punctuation\">)</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  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n<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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n  graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">,</span> <span class=\"token string\">'selected'</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">!</span>node<span class=\"token punctuation\">.</span><span class=\"token function\">hasState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'selected'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 切换选中</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":341,"column":1,"offset":9566},"end":{"line":363,"column":4,"offset":10083},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"G6 并未限定节点的状态，只要你在 ","position":{"start":{"line":365,"column":1,"offset":10085},"end":{"line":365,"column":19,"offset":10103},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">setState</code>","position":{"start":{"line":365,"column":19,"offset":10103},"end":{"line":365,"column":29,"offset":10113},"indent":[]}},{"type":"text","value":" 方法中进行处理你可以实现任何交互，如实现鼠标放到节点上后节点逐渐变大的效果。","position":{"start":{"line":365,"column":29,"offset":10113},"end":{"line":365,"column":68,"offset":10152},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":365,"column":68,"offset":10152},"end":{"line":365,"column":74,"offset":10158},"indent":[]}},{"type":"text","value":"\n","position":{"start":{"line":365,"column":74,"offset":10158},"end":{"line":366,"column":1,"offset":10159},"indent":[1]}},{"type":"html","value":"<img src='https://cdn.nlark.com/yuque/0/2019/gif/244306/1561463342276-2291c0af-afca-4953-a920-948c40d90ad4.gif#align=left&display=inline&height=119&name=%E6%89%A9%E5%B1%95%E5%8A%A8%E7%94%BB1.gif&originHeight=119&originWidth=351&search=&size=7256&status=done&width=351' alt='img' width='350'/>","position":{"start":{"line":366,"column":1,"offset":10159},"end":{"line":366,"column":293,"offset":10451},"indent":[]}}],"position":{"start":{"line":365,"column":1,"offset":10085},"end":{"line":366,"column":293,"offset":10451},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"<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\">'custom'</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">{</span>\n    <span class=\"token comment\">// 设置状态</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> item</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">const</span> group <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">getContainer</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'children'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 顺序根据 draw 时确定</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>name <span class=\"token operator\">===</span> <span class=\"token string\">'running'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n          shape<span class=\"token punctuation\">.</span><span class=\"token function\">animate</span><span class=\"token punctuation\">(</span>\n            <span class=\"token punctuation\">{</span>\n              r<span class=\"token punctuation\">:</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span>\n              repeat<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 number\">1000</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 keyword\">else</span> <span class=\"token punctuation\">{</span>\n          shape<span class=\"token punctuation\">.</span><span class=\"token function\">stopAnimate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n          shape<span class=\"token punctuation\">.</span><span class=\"token function\">attr</span><span class=\"token punctuation\">(</span><span class=\"token string\">'r'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">)</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  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 鼠标移动到上面 running，移出结束</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:mouseenter'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n  graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">,</span> <span class=\"token string\">'running'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:mouseleave'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n  graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">,</span> <span class=\"token string\">'running'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</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</code></pre></div>","position":{"start":{"line":368,"column":1,"offset":10453},"end":{"line":398,"column":4,"offset":11117},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":400,"column":1,"offset":11119}}}}