@antv/g6
Version:
graph visualization frame work
1 lines • 47.9 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-86d7b57dfaf82e04bd1b1d1a9acd66be-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 除了提供丰富的 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":12,"offset":12}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/internal-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义边","position":{"start":{"line":2,"column":13,"offset":13},"end":{"line":2,"column":17,"offset":17}}}],"position":{"start":{"line":2,"column":12,"offset":12},"end":{"line":2,"column":63,"offset":63}}},{"type":"text","value":" 外，还提供了自定义边的机制，方便用户开发更加定制化的边，包括含有复杂图形的边、复杂交互的边、带有动画的边等。","position":{"start":{"line":2,"column":63,"offset":63},"end":{"line":2,"column":118,"offset":118}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":118,"offset":118}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在本章中我们会通过四个案例，从简单到复杂讲解边的自定义：","position":{"start":{"line":4,"column":1,"offset":120},"end":{"line":4,"column":29,"offset":148}}},{"type":"raw","value":"<br />","position":{"start":{"line":4,"column":29,"offset":148},"end":{"line":4,"column":35,"offset":154}}},{"type":"text","value":"1. 从无到有的定义边；","position":{"start":{"line":4,"column":35,"offset":154},"end":{"line":4,"column":47,"offset":166}}},{"type":"raw","value":"<br />","position":{"start":{"line":4,"column":47,"offset":166},"end":{"line":4,"column":53,"offset":172}}},{"type":"text","value":"2. 扩展现有边：","position":{"start":{"line":4,"column":53,"offset":172},"end":{"line":4,"column":62,"offset":181}}},{"type":"raw","value":"<br />","position":{"start":{"line":4,"column":62,"offset":181},"end":{"line":4,"column":68,"offset":187}}},{"type":"text","value":"3. 边的交互样式；","position":{"start":{"line":4,"column":68,"offset":187},"end":{"line":4,"column":78,"offset":197}}},{"type":"raw","value":"<br />","position":{"start":{"line":4,"column":78,"offset":197},"end":{"line":4,"column":84,"offset":203}}},{"type":"text","value":"4. 自定义带箭头的边。","position":{"start":{"line":4,"column":84,"offset":203},"end":{"line":4,"column":96,"offset":215}}}],"position":{"start":{"line":4,"column":1,"offset":120},"end":{"line":4,"column":96,"offset":215}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"1-从无到有定义边"},"children":[{"type":"element","tagName":"a","properties":{"href":"#1-%E4%BB%8E%E6%97%A0%E5%88%B0%E6%9C%89%E5%AE%9A%E4%B9%89%E8%BE%B9","aria-label":"1 从无到有定义边 permalink","class":"anchor"},"children":[{"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":7,"column":4,"offset":221},"end":{"line":7,"column":14,"offset":231}}}],"position":{"start":{"line":7,"column":1,"offset":218},"end":{"line":7,"column":14,"offset":231}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"我们来实现垂直的折线：","position":{"start":{"line":8,"column":1,"offset":232},"end":{"line":8,"column":12,"offset":243}}},{"type":"raw","value":"<br />","position":{"start":{"line":8,"column":12,"offset":243},"end":{"line":8,"column":18,"offset":249}}}],"position":{"start":{"line":8,"column":1,"offset":232},"end":{"line":8,"column":18,"offset":249}}},{"type":"text","value":"\n"},{"type":"raw","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1548413029414-51b39bd3-c5f4-42ab-90f2-1183c069b34f.png#align=left&display=inline&height=281&name=image.png&originHeight=281&originWidth=206&search=&size=5679&status=done&width=206' alt='img' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1548412991278-5ddb50ea-3f1d-4269-b8d9-19ac84106ff6.png#align=left&display=inline&height=280&name=image.png&originHeight=280&originWidth=187&search=&size=5072&status=done&width=187' alt='img' width='150'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/89796/1548413062802-40be1962-e421-4295-9985-6c9709656462.png#align=left&display=inline&height=264&name=image.png&originHeight=264&originWidth=187&search=&size=5117&status=done&width=187' alt='img' width='150'/>","position":{"start":{"line":10,"column":1,"offset":251},"end":{"line":12,"column":260,"offset":1030}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"（左）直线边。（中）默认的折线边。（右）调整了节点的控制点后的折线边。","position":{"start":{"line":14,"column":3,"offset":1034},"end":{"line":14,"column":38,"offset":1069}}}],"position":{"start":{"line":14,"column":3,"offset":1034},"end":{"line":14,"column":38,"offset":1069}}},{"type":"text","value":"\n"}],"position":{"start":{"line":14,"column":1,"offset":1032},"end":{"line":14,"column":38,"offset":1069}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"自定义边"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%BE%B9","aria-label":"自定义边 permalink","class":"anchor"},"children":[{"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":17,"column":5,"offset":1076},"end":{"line":17,"column":9,"offset":1080}}}],"position":{"start":{"line":17,"column":1,"offset":1072},"end":{"line":17,"column":9,"offset":1080}}},{"type":"text","value":"\n"},{"type":"raw","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\">registerEdge</span><span class=\"token punctuation\">(</span><span class=\"token string\">'hvh'</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 keyword\">const</span> startPoint <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>startPoint<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> endPoint <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">.</span>endPoint<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\">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 stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#333'</span><span class=\"token punctuation\">,</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>x <span class=\"token operator\">/</span> <span class=\"token number\">3</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">/</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>y<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> endPoint<span class=\"token punctuation\">.</span>x <span class=\"token operator\">/</span> <span class=\"token number\">3</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span><span class=\"token number\">2</span> <span class=\"token operator\">/</span> <span class=\"token number\">3</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>y<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> endPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>y<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 punctuation\">}</span><span class=\"token punctuation\">)</span><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 punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":18,"column":1,"offset":1081},"end":{"line":37,"column":4,"offset":1613}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"默认的 ","position":{"start":{"line":39,"column":3,"offset":1617},"end":{"line":39,"column":7,"offset":1621}}},{"type":"raw","value":"<code class=\"language-text\">startPoint</code>","position":{"start":{"line":39,"column":7,"offset":1621},"end":{"line":39,"column":19,"offset":1633}}},{"type":"text","value":"， ","position":{"start":{"line":39,"column":19,"offset":1633},"end":{"line":39,"column":21,"offset":1635}}},{"type":"raw","value":"<code class=\"language-text\">endPoint</code>","position":{"start":{"line":39,"column":21,"offset":1635},"end":{"line":39,"column":31,"offset":1645}}},{"type":"text","value":" 是两个端点中点的连接线分别同圆的交点；","position":{"start":{"line":39,"column":31,"offset":1645},"end":{"line":39,"column":51,"offset":1665}}}],"position":{"start":{"line":39,"column":1,"offset":1615},"end":{"line":39,"column":51,"offset":1665}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"修改节点的锚点可以修改 ","position":{"start":{"line":40,"column":3,"offset":1668},"end":{"line":40,"column":15,"offset":1680}}},{"type":"raw","value":"<code class=\"language-text\">startPoint</code>","position":{"start":{"line":40,"column":15,"offset":1680},"end":{"line":40,"column":27,"offset":1692}}},{"type":"text","value":" 和 ","position":{"start":{"line":40,"column":27,"offset":1692},"end":{"line":40,"column":30,"offset":1695}}},{"type":"raw","value":"<code class=\"language-text\">endPoint</code>","position":{"start":{"line":40,"column":30,"offset":1695},"end":{"line":40,"column":40,"offset":1705}}},{"type":"text","value":" 的位置。","position":{"start":{"line":40,"column":40,"offset":1705},"end":{"line":40,"column":45,"offset":1710}}}],"position":{"start":{"line":40,"column":1,"offset":1666},"end":{"line":40,"column":45,"offset":1710}}},{"type":"text","value":"\n"}],"position":{"start":{"line":39,"column":1,"offset":1615},"end":{"line":40,"column":45,"offset":1710}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"示例数据"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%A4%BA%E4%BE%8B%E6%95%B0%E6%8D%AE","aria-label":"示例数据 permalink","class":"anchor"},"children":[{"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":42,"column":5,"offset":1716},"end":{"line":42,"column":9,"offset":1720}}}],"position":{"start":{"line":42,"column":1,"offset":1712},"end":{"line":42,"column":9,"offset":1720}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过以下的数据，使用自定义的 hvh 边，就可以实现上图最右边的效果。","position":{"start":{"line":43,"column":1,"offset":1721},"end":{"line":43,"column":36,"offset":1756}}}],"position":{"start":{"line":43,"column":1,"offset":1721},"end":{"line":43,"column":36,"offset":1756}}},{"type":"text","value":"\n"},{"type":"raw","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\">200</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>\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>\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>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">200</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>\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>\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>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">300</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>\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>\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 edges<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\">'edge1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'hvh'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'edge2'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</span><span class=\"token punctuation\">,</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'hvh'</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</code></pre></div>","position":{"start":{"line":44,"column":1,"offset":1757},"end":{"line":80,"column":4,"offset":2268}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />","position":{"start":{"line":82,"column":1,"offset":2270},"end":{"line":82,"column":7,"offset":2276}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"2-扩展现有边"},"children":[{"type":"element","tagName":"a","properties":{"href":"#2-%E6%89%A9%E5%B1%95%E7%8E%B0%E6%9C%89%E8%BE%B9","aria-label":"2 扩展现有边 permalink","class":"anchor"},"children":[{"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":84,"column":4,"offset":2281},"end":{"line":84,"column":12,"offset":2289}}}],"position":{"start":{"line":84,"column":1,"offset":2278},"end":{"line":84,"column":12,"offset":2289}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过 ","position":{"start":{"line":85,"column":1,"offset":2290},"end":{"line":85,"column":4,"offset":2293}}},{"type":"raw","value":"<code class=\"language-text\">afterDraw</code>","position":{"start":{"line":85,"column":4,"offset":2293},"end":{"line":85,"column":15,"offset":2304}}},{"type":"text","value":" 接口给现有的曲线增加动画。","position":{"start":{"line":85,"column":15,"offset":2304},"end":{"line":85,"column":29,"offset":2318}}}],"position":{"start":{"line":85,"column":1,"offset":2290},"end":{"line":85,"column":29,"offset":2318}}},{"type":"text","value":"\n"},{"type":"raw","value":"<img src='https://cdn.nlark.com/yuque/0/2019/gif/89796/1548411369501-cdf8f944-79db-43eb-b266-de6ad9f4b6a8.gif#align=left&display=inline&height=251&name=line-grow.gif&originHeight=251&originWidth=184&search=&size=27589&status=done&width=184' alt='img' width='150'/>","position":{"start":{"line":87,"column":1,"offset":2320},"end":{"line":87,"column":265,"offset":2584}}},{"type":"text","value":"\n"},{"type":"raw","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\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'line-growth'</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> 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>\n <span class=\"token keyword\">const</span> length <span class=\"token operator\">=</span> shape<span class=\"token punctuation\">.</span><span class=\"token function\">getTotalLength</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\">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> startLen <span class=\"token operator\">=</span> ratio <span class=\"token operator\">*</span> length<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> cfg <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n lineDash<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>startLen<span class=\"token punctuation\">,</span> length <span class=\"token operator\">-</span> startLen<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\">return</span> cfg<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\">2000</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 string\">'cubic'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":89,"column":1,"offset":2586},"end":{"line":106,"column":4,"offset":2995}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />","position":{"start":{"line":108,"column":1,"offset":2997},"end":{"line":108,"column":7,"offset":3003}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"3-边的交互样式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#3-%E8%BE%B9%E7%9A%84%E4%BA%A4%E4%BA%92%E6%A0%B7%E5%BC%8F","aria-label":"3 边的交互样式 permalink","class":"anchor"},"children":[{"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. 边的交互样式","position":{"start":{"line":110,"column":4,"offset":3008},"end":{"line":110,"column":13,"offset":3017}}}],"position":{"start":{"line":110,"column":1,"offset":3005},"end":{"line":110,"column":13,"offset":3017}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以点击选中、鼠标 hover 到边为示例，实现如下需求：","position":{"start":{"line":111,"column":1,"offset":3018},"end":{"line":111,"column":29,"offset":3046}}}],"position":{"start":{"line":111,"column":1,"offset":3018},"end":{"line":111,"column":29,"offset":3046}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"点击边时边变粗，再点击变成细；","position":{"start":{"line":113,"column":3,"offset":3050},"end":{"line":113,"column":18,"offset":3065}}}],"position":{"start":{"line":113,"column":1,"offset":3048},"end":{"line":113,"column":18,"offset":3065}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"鼠标移动上去变成红色，离开变成 ","position":{"start":{"line":114,"column":3,"offset":3068},"end":{"line":114,"column":19,"offset":3084}}},{"type":"raw","value":"<code class=\"language-text\">'#333'</code>","position":{"start":{"line":114,"column":19,"offset":3084},"end":{"line":114,"column":27,"offset":3092}}},{"type":"text","value":" 。","position":{"start":{"line":114,"column":27,"offset":3092},"end":{"line":114,"column":29,"offset":3094}}}],"position":{"start":{"line":114,"column":1,"offset":3066},"end":{"line":114,"column":29,"offset":3094}}},{"type":"text","value":"\n"}],"position":{"start":{"line":113,"column":1,"offset":3048},"end":{"line":114,"column":29,"offset":3094}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"效果如下图所示。","position":{"start":{"line":116,"column":1,"offset":3096},"end":{"line":116,"column":9,"offset":3104}}},{"type":"raw","value":"<br />","position":{"start":{"line":116,"column":9,"offset":3104},"end":{"line":116,"column":15,"offset":3110}}}],"position":{"start":{"line":116,"column":1,"offset":3096},"end":{"line":116,"column":15,"offset":3110}}},{"type":"text","value":"\n"},{"type":"raw","value":"<img src='https://cdn.nlark.com/yuque/0/2019/gif/89796/1548411103714-a97cdf5a-539c-40b1-8772-4f72b1f4fea3.gif#align=left&display=inline&height=171&name=active-select.gif&originHeight=171&originWidth=412&search=&size=54407&status=done&width=412' alt='img' width='350'/>\n<br />提示：边如果过细点击时很难击中，可以设置 `**lineAppendWidth**` 来提升击中范围。","position":{"start":{"line":118,"column":1,"offset":3112},"end":{"line":119,"column":58,"offset":3438}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 基于 line 扩展出新的图形</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerEdge</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'custom-edge'</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\">'active'</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\">'stroke'</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\">'stroke'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'#333'</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 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\">'lineWidth'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</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\">'lineWidth'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</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\">'line'</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\">'edge: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> edge <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>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'selected'</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">!</span>edge<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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge: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> edge <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>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</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\">'edge: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> edge <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>edge<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</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":121,"column":1,"offset":3440},"end":{"line":161,"column":4,"offset":4335}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />","position":{"start":{"line":163,"column":1,"offset":4337},"end":{"line":163,"column":7,"offset":4343}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"4-自定义带箭头的边"},"children":[{"type":"element","tagName":"a","properties":{"href":"#4-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B8%A6%E7%AE%AD%E5%A4%B4%E7%9A%84%E8%BE%B9","aria-label":"4 自定义带箭头的边 permalink","class":"anchor"},"children":[{"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":165,"column":4,"offset":4348},"end":{"line":165,"column":15,"offset":4359}}}],"position":{"start":{"line":165,"column":1,"offset":4345},"end":{"line":165,"column":15,"offset":4359}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"很多时候，G6 默认提供的箭头并不能满足业务上的需求，这个时候，就需要我们自定义箭头。当然了，G6 也支持箭头样式的自定义。","position":{"start":{"line":166,"column":1,"offset":4360},"end":{"line":166,"column":63,"offset":4422}}},{"type":"raw","value":"<br />","position":{"start":{"line":166,"column":63,"offset":4422},"end":{"line":166,"column":69,"offset":4428}}}],"position":{"start":{"line":166,"column":1,"offset":4360},"end":{"line":166,"column":69,"offset":4428}}},{"type":"text","value":"\n"},{"type":"raw","value":"<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571143168729-72137df2-8d1e-4da6-ba53-86e9726a7af8.png#align=left&display=inline&height=166&name=image.png&originHeight=332&originWidth=632&search=&size=79105&status=done&width=316' alt='img' width='250'/>","position":{"start":{"line":168,"column":1,"offset":4430},"end":{"line":168,"column":262,"offset":4691}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"（左）G6 内置箭头。（右）自定义边带有自定义箭头。","position":{"start":{"line":170,"column":3,"offset":4695},"end":{"line":170,"column":29,"offset":4721}}}],"position":{"start":{"line":170,"column":3,"offset":4695},"end":{"line":170,"column":29,"offset":4721}}},{"type":"text","value":"\n"}],"position":{"start":{"line":170,"column":1,"offset":4693},"end":{"line":170,"column":29,"offset":4721}}},{"type":"text","value":"\n"},{"type":"raw","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\">registerEdge</span><span class=\"token punctuation\">(</span><span class=\"token string\">'line-arrow'</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 keyword\">const</span> <span class=\"token punctuation\">{</span> startPoint<span class=\"token punctuation\">,</span> endPoint <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> cfg<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> keyShape <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 punctuation\">[</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'M'</span><span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> startPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">'L'</span><span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> endPoint<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n startArrow<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token string\">'M 10,0 L -10,-10 L -10,10 Z'</span><span class=\"token punctuation\">,</span>\n d<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n endArrow<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n path<span class=\"token punctuation\">:</span> <span class=\"token string\">'M 10,0 L -10,-10 L -10,10 Z'</span><span class=\"token punctuation\">,</span>\n d<span class=\"token punctuation\">:</span> <span class=\"token number\">10</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><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> keyShape<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":173,"column":1,"offset":4724},"end":{"line":198,"column":4,"offset":5296}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":200,"column":1,"offset":5298}}}}