@antv/g6
Version:
graph visualization frame work
1 lines • 67.3 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-d548ee9d4916aa08041827e6ae16aa5e-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":"节点与边在视觉上的层级涉及到了它们相对应的","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":22,"offset":22}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/vy5fzi","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":2,"column":23,"offset":23},"end":{"line":2,"column":33,"offset":33}}}],"position":{"start":{"line":2,"column":22,"offset":22},"end":{"line":2,"column":72,"offset":72}}},{"type":"text","value":"。本文提到的所有分组 Group 都为 G6 的 ","position":{"start":{"line":2,"column":72,"offset":72},"end":{"line":2,"column":97,"offset":97}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/vy5fzi","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":2,"column":98,"offset":98},"end":{"line":2,"column":108,"offset":108}}}],"position":{"start":{"line":2,"column":97,"offset":97},"end":{"line":2,"column":147,"offset":147}}},{"type":"text","value":"，而非 G6 的 ","position":{"start":{"line":2,"column":147,"offset":147},"end":{"line":2,"column":156,"offset":156}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/inxeg8","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"节点分组 Group","position":{"start":{"line":2,"column":157,"offset":157},"end":{"line":2,"column":167,"offset":167}}}],"position":{"start":{"line":2,"column":156,"offset":156},"end":{"line":2,"column":206,"offset":206}}},{"type":"text","value":"，请注意区分这两种 Group，其区别在 ","position":{"start":{"line":2,"column":206,"offset":206},"end":{"line":2,"column":227,"offset":227}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/vy5fzi","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":2,"column":228,"offset":228},"end":{"line":2,"column":238,"offset":238}}}],"position":{"start":{"line":2,"column":227,"offset":227},"end":{"line":2,"column":277,"offset":277}}},{"type":"text","value":" 中说明。","position":{"start":{"line":2,"column":277,"offset":277},"end":{"line":2,"column":282,"offset":282}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":282,"offset":282}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 ","position":{"start":{"line":4,"column":1,"offset":284},"end":{"line":4,"column":3,"offset":286}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/vy5fzi","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"图形分组 Group","position":{"start":{"line":4,"column":4,"offset":287},"end":{"line":4,"column":14,"offset":297}}}],"position":{"start":{"line":4,"column":3,"offset":286},"end":{"line":4,"column":53,"offset":336}}},{"type":"text","value":" 中我们提到：在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 ","position":{"start":{"line":4,"column":53,"offset":336},"end":{"line":4,"column":94,"offset":377}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":4,"column":94,"offset":377},"end":{"line":4,"column":105,"offset":388}}},{"type":"text","value":" 的 group，所有的边属于同一个变量名为 ","position":{"start":{"line":4,"column":105,"offset":388},"end":{"line":4,"column":128,"offset":411}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":4,"column":128,"offset":411},"end":{"line":4,"column":139,"offset":422}}},{"type":"text","value":" 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。","position":{"start":{"line":4,"column":139,"offset":422},"end":{"line":4,"column":198,"offset":481}}}],"position":{"start":{"line":4,"column":1,"offset":284},"end":{"line":4,"column":198,"offset":481}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"但有时，我们需要让边在视觉上在节点上层。例如，高亮节点及其相关边和邻居、高亮一条边等。可以通过配合图实例的配置项 ","position":{"start":{"line":6,"column":1,"offset":483},"end":{"line":6,"column":58,"offset":540}}},{"type":"raw","value":"<code class=\"language-text\">groupByTypes</code>","position":{"start":{"line":6,"column":58,"offset":540},"end":{"line":6,"column":72,"offset":554}}},{"type":"text","value":" 以及节点和边的 ","position":{"start":{"line":6,"column":72,"offset":554},"end":{"line":6,"column":81,"offset":563}}},{"type":"raw","value":"<code class=\"language-text\">toFront()</code>","position":{"start":{"line":6,"column":81,"offset":563},"end":{"line":6,"column":92,"offset":574}}},{"type":"text","value":" 与 ","position":{"start":{"line":6,"column":92,"offset":574},"end":{"line":6,"column":95,"offset":577}}},{"type":"raw","value":"<code class=\"language-text\">toBack()</code>","position":{"start":{"line":6,"column":95,"offset":577},"end":{"line":6,"column":105,"offset":587}}},{"type":"text","value":" 函数实现。为实现如下效果：鼠标进入节点时，提升相关边以及邻居节点的层级；离开节点时恢复；鼠标进入边时，提升边及其两端点的层级；离开边时恢复。","position":{"start":{"line":6,"column":105,"offset":587},"end":{"line":6,"column":176,"offset":658}}},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/Yanyan-Wang/pen/GRRNzGN","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Demo 完整代码","position":{"start":{"line":6,"column":177,"offset":659},"end":{"line":6,"column":186,"offset":668}}}],"position":{"start":{"line":6,"column":176,"offset":658},"end":{"line":6,"column":231,"offset":713}}},{"type":"text","value":"。","position":{"start":{"line":6,"column":231,"offset":713},"end":{"line":6,"column":232,"offset":714}}},{"type":"raw","value":"<br />","position":{"start":{"line":6,"column":232,"offset":714},"end":{"line":6,"column":238,"offset":720}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1571627989063-367e9f35-8f06-4d75-a201-759add6e8a6f.gif#align=left&display=inline&height=210&name=highlight-edge-node.gif&originHeight=210&originWidth=206&search=&size=11193&status=done&width=206","alt":"highlight-edge-node.gif"},"children":[],"position":{"start":{"line":6,"column":238,"offset":720},"end":{"line":6,"column":506,"offset":988}}}],"position":{"start":{"line":6,"column":1,"offset":483},"end":{"line":6,"column":506,"offset":988}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"要实现上图效果，需要以下步骤：","position":{"start":{"line":8,"column":1,"offset":990},"end":{"line":8,"column":16,"offset":1005}}}],"position":{"start":{"line":8,"column":1,"offset":990},"end":{"line":8,"column":16,"offset":1005}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Step 1：实例化图时配置 ","position":{"start":{"line":10,"column":3,"offset":1009},"end":{"line":10,"column":18,"offset":1024}}},{"type":"raw","value":"<code class=\"language-text\">groupByTypes</code>","position":{"start":{"line":10,"column":18,"offset":1024},"end":{"line":10,"column":32,"offset":1038}}},{"type":"text","value":" 为 ","position":{"start":{"line":10,"column":32,"offset":1038},"end":{"line":10,"column":35,"offset":1041}}},{"type":"raw","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":10,"column":35,"offset":1041},"end":{"line":10,"column":42,"offset":1048}}},{"type":"text","value":"；","position":{"start":{"line":10,"column":42,"offset":1048},"end":{"line":10,"column":43,"offset":1049}}}],"position":{"start":{"line":10,"column":1,"offset":1007},"end":{"line":10,"column":43,"offset":1049}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Step 2：将节点放置在边上层；","position":{"start":{"line":11,"column":3,"offset":1052},"end":{"line":11,"column":20,"offset":1069}}}],"position":{"start":{"line":11,"column":1,"offset":1050},"end":{"line":11,"column":20,"offset":1069}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Step 3：监听鼠标事件并改变目标元素层级。","position":{"start":{"line":12,"column":3,"offset":1072},"end":{"line":12,"column":26,"offset":1095}}}],"position":{"start":{"line":12,"column":1,"offset":1070},"end":{"line":12,"column":26,"offset":1095}}},{"type":"text","value":"\n"}],"position":{"start":{"line":10,"column":1,"offset":1007},"end":{"line":12,"column":26,"offset":1095}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":""},"children":[{"type":"element","tagName":"a","properties":{"href":"#","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>"}]}],"position":{"start":{"line":14,"column":1,"offset":1097},"end":{"line":14,"column":4,"offset":1100}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"前提代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%89%8D%E6%8F%90%E4%BB%A3%E7%A0%81","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":15,"column":4,"offset":1104},"end":{"line":15,"column":8,"offset":1108}}}],"position":{"start":{"line":15,"column":1,"offset":1101},"end":{"line":15,"column":8,"offset":1108}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面代码完成了引入 G6、数据设置、实例化图、渲染图的命令等。后文将修改下面这份代码中以达到上图高亮效果。","position":{"start":{"line":16,"column":1,"offset":1109},"end":{"line":16,"column":54,"offset":1162}}}],"position":{"start":{"line":16,"column":1,"offset":1109},"end":{"line":16,"column":54,"offset":1162}}},{"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\">// 数据源</span>\n<span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</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 size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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\">'node1'</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\">200</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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\">150</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">150</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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\">150</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">250</span><span class=\"token punctuation\">,</span>\n size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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\">'node4'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">150</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 size<span class=\"token punctuation\">:</span> <span class=\"token number\">20</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\">'edge0'</span><span class=\"token punctuation\">,</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node0'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</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\">'edge1'</span><span class=\"token punctuation\">,</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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 <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\n<span class=\"token comment\">// 实例化图</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\">800</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 为方便演示，加粗边</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">2</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\n<span class=\"token comment\">// 读取数据</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>\n<span class=\"token comment\">// 渲染图</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":17,"column":1,"offset":1163},"end":{"line":74,"column":4,"offset":1987}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-1","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>"}]}],"position":{"start":{"line":76,"column":1,"offset":1989},"end":{"line":76,"column":4,"offset":1992}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"step-1-实例化图时的配置"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-1-%E5%AE%9E%E4%BE%8B%E5%8C%96%E5%9B%BE%E6%97%B6%E7%9A%84%E9%85%8D%E7%BD%AE","aria-label":"step 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":"Step 1 实例化图时的配置","position":{"start":{"line":77,"column":4,"offset":1996},"end":{"line":77,"column":19,"offset":2011}}}],"position":{"start":{"line":77,"column":1,"offset":1993},"end":{"line":77,"column":19,"offset":2011}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">groupByTypes</code>","position":{"start":{"line":78,"column":1,"offset":2012},"end":{"line":78,"column":15,"offset":2026}}},{"type":"text","value":" 是图的一个配置项，当其为默认值 ","position":{"start":{"line":78,"column":15,"offset":2026},"end":{"line":78,"column":32,"offset":2043}}},{"type":"raw","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":78,"column":32,"offset":2043},"end":{"line":78,"column":38,"offset":2049}}},{"type":"text","value":" 时，所有节点在一个名为 ","position":{"start":{"line":78,"column":38,"offset":2049},"end":{"line":78,"column":51,"offset":2062}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":78,"column":51,"offset":2062},"end":{"line":78,"column":62,"offset":2073}}},{"type":"text","value":" 的分组，所有边在另一个名为 ","position":{"start":{"line":78,"column":62,"offset":2073},"end":{"line":78,"column":77,"offset":2088}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":78,"column":77,"offset":2088},"end":{"line":78,"column":88,"offset":2099}}},{"type":"text","value":" 的分组，且 ","position":{"start":{"line":78,"column":88,"offset":2099},"end":{"line":78,"column":95,"offset":2106}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":78,"column":95,"offset":2106},"end":{"line":78,"column":106,"offset":2117}}},{"type":"text","value":" 在 ","position":{"start":{"line":78,"column":106,"offset":2117},"end":{"line":78,"column":109,"offset":2120}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":78,"column":109,"offset":2120},"end":{"line":78,"column":120,"offset":2131}}},{"type":"text","value":" 上层。将其设置为 ","position":{"start":{"line":78,"column":120,"offset":2131},"end":{"line":78,"column":130,"offset":2141}}},{"type":"raw","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":78,"column":130,"offset":2141},"end":{"line":78,"column":137,"offset":2148}}},{"type":"text","value":" 后，将不存在 ","position":{"start":{"line":78,"column":137,"offset":2148},"end":{"line":78,"column":145,"offset":2156}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":78,"column":145,"offset":2156},"end":{"line":78,"column":156,"offset":2167}}},{"type":"text","value":" 和 ","position":{"start":{"line":78,"column":156,"offset":2167},"end":{"line":78,"column":159,"offset":2170}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":78,"column":159,"offset":2170},"end":{"line":78,"column":170,"offset":2181}}},{"type":"text","value":"，所有节点和边在同一个分组，它们的层级根据生成的顺序决定。","position":{"start":{"line":78,"column":170,"offset":2181},"end":{"line":78,"column":199,"offset":2210}}}],"position":{"start":{"line":78,"column":1,"offset":2012},"end":{"line":78,"column":199,"offset":2210}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-2"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-2","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>"}]}],"position":{"start":{"line":80,"column":1,"offset":2212},"end":{"line":80,"column":4,"offset":2215}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"参数描述"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8F%82%E6%95%B0%E6%8F%8F%E8%BF%B0","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":81,"column":5,"offset":2220},"end":{"line":81,"column":9,"offset":2224}}}],"position":{"start":{"line":81,"column":1,"offset":2216},"end":{"line":81,"column":9,"offset":2224}}},{"type":"text","value":"\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"名称","position":{"start":{"line":82,"column":3,"offset":2227},"end":{"line":82,"column":5,"offset":2229}}}],"position":{"start":{"line":82,"column":3,"offset":2227},"end":{"line":82,"column":5,"offset":2229}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"类型","position":{"start":{"line":82,"column":8,"offset":2232},"end":{"line":82,"column":10,"offset":2234}}}],"position":{"start":{"line":82,"column":8,"offset":2232},"end":{"line":82,"column":10,"offset":2234}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"默认值","position":{"start":{"line":82,"column":13,"offset":2237},"end":{"line":82,"column":16,"offset":2240}}}],"position":{"start":{"line":82,"column":13,"offset":2237},"end":{"line":82,"column":16,"offset":2240}}},{"type":"text","value":"\n"},{"type":"element","tagName":"th","properties":{"align":null},"children":[{"type":"text","value":"描述","position":{"start":{"line":82,"column":19,"offset":2243},"end":{"line":82,"column":21,"offset":2245}}}],"position":{"start":{"line":82,"column":19,"offset":2243},"end":{"line":82,"column":21,"offset":2245}}},{"type":"text","value":"\n"}],"position":{"start":{"line":82,"column":1,"offset":2225},"end":{"line":82,"column":23,"offset":2247}}},{"type":"text","value":"\n"}],"position":{"start":{"line":82,"column":1,"offset":2225},"end":{"line":82,"column":23,"offset":2247}}},{"type":"text","value":"\n"},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"groupByTypes","position":{"start":{"line":84,"column":3,"offset":2276},"end":{"line":84,"column":15,"offset":2288}}}],"position":{"start":{"line":84,"column":3,"offset":2276},"end":{"line":84,"column":15,"offset":2288}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"Boolean","position":{"start":{"line":84,"column":18,"offset":2291},"end":{"line":84,"column":25,"offset":2298}}}],"position":{"start":{"line":84,"column":18,"offset":2291},"end":{"line":84,"column":25,"offset":2298}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"true","position":{"start":{"line":84,"column":28,"offset":2301},"end":{"line":84,"column":32,"offset":2305}}}],"position":{"start":{"line":84,"column":28,"offset":2301},"end":{"line":84,"column":32,"offset":2305}}},{"type":"text","value":"\n"},{"type":"element","tagName":"td","properties":{"align":null},"children":[{"type":"text","value":"各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。","position":{"start":{"line":84,"column":35,"offset":2308},"end":{"line":84,"column":120,"offset":2393}}}],"position":{"start":{"line":84,"column":35,"offset":2308},"end":{"line":84,"column":120,"offset":2393}}},{"type":"text","value":"\n"}],"position":{"start":{"line":84,"column":1,"offset":2274},"end":{"line":84,"column":122,"offset":2395}}},{"type":"text","value":"\n"}],"position":{"start":{"line":84,"column":1,"offset":2274},"end":{"line":84,"column":122,"offset":2395}}},{"type":"text","value":"\n"}],"position":{"start":{"line":82,"column":1,"offset":2225},"end":{"line":84,"column":122,"offset":2395}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-3"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-3","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>"}]}],"position":{"start":{"line":87,"column":1,"offset":2398},"end":{"line":87,"column":4,"offset":2401}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"使用方式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F","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":88,"column":5,"offset":2406},"end":{"line":88,"column":9,"offset":2410}}}],"position":{"start":{"line":88,"column":1,"offset":2402},"end":{"line":88,"column":9,"offset":2410}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更改 前提代码 中实例化图部分代码，添加 ","position":{"start":{"line":89,"column":1,"offset":2411},"end":{"line":89,"column":22,"offset":2432}}},{"type":"raw","value":"<code class=\"language-text\">groupByTypes</code>","position":{"start":{"line":89,"column":22,"offset":2432},"end":{"line":89,"column":36,"offset":2446}}},{"type":"text","value":" 配置项，并设置为 ","position":{"start":{"line":89,"column":36,"offset":2446},"end":{"line":89,"column":46,"offset":2456}}},{"type":"raw","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":89,"column":46,"offset":2456},"end":{"line":89,"column":53,"offset":2463}}},{"type":"text","value":"：","position":{"start":{"line":89,"column":53,"offset":2463},"end":{"line":89,"column":54,"offset":2464}}}],"position":{"start":{"line":89,"column":1,"offset":2411},"end":{"line":89,"column":54,"offset":2464}}},{"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> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// ... // 其他配置</span>\n groupByTypes<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</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":90,"column":1,"offset":2465},"end":{"line":95,"column":4,"offset":2555}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"此时，将会得到如下效果：","position":{"start":{"line":97,"column":1,"offset":2557},"end":{"line":97,"column":13,"offset":2569}}},{"type":"raw","value":"<br />","position":{"start":{"line":97,"column":13,"offset":2569},"end":{"line":97,"column":19,"offset":2575}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571629063913-a0016f3f-6244-48e4-87ac-237e86dfdbda.png#align=left&display=inline&height=133&name=image.png&originHeight=302&originWidth=224&search=&size=23796&status=done&width=99","alt":"image.png"},"children":[],"position":{"start":{"line":97,"column":19,"offset":2575},"end":{"line":97,"column":258,"offset":2814}}}],"position":{"start":{"line":97,"column":1,"offset":2557},"end":{"line":97,"column":258,"offset":2814}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-4"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-4","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>"}]}],"position":{"start":{"line":99,"column":1,"offset":2816},"end":{"line":99,"column":4,"offset":2819}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"step-2-将节点放置在边上层"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-2-%E5%B0%86%E8%8A%82%E7%82%B9%E6%94%BE%E7%BD%AE%E5%9C%A8%E8%BE%B9%E4%B8%8A%E5%B1%82","aria-label":"step 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":"Step 2 将节点放置在边上层","position":{"start":{"line":100,"column":4,"offset":2823},"end":{"line":100,"column":20,"offset":2839}}}],"position":{"start":{"line":100,"column":1,"offset":2820},"end":{"line":100,"column":20,"offset":2839}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"上一步结果中节点在边的下层不符合常规，是由于 ","position":{"start":{"line":101,"column":1,"offset":2840},"end":{"line":101,"column":24,"offset":2863}}},{"type":"raw","value":"<code class=\"language-text\">groupByTypes</code>","position":{"start":{"line":101,"column":24,"offset":2863},"end":{"line":101,"column":38,"offset":2877}}},{"type":"text","value":" 为 ","position":{"start":{"line":101,"column":38,"offset":2877},"end":{"line":101,"column":41,"offset":2880}}},{"type":"raw","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":101,"column":41,"offset":2880},"end":{"line":101,"column":48,"offset":2887}}},{"type":"text","value":" 时，节点和边的层级根据生成的顺序确定，而边的生成顺序在节点之后，因此所有边被绘制到了节点上方。为了使图符合常规——节点在上层，边在下层，可以在 ","position":{"start":{"line":101,"column":48,"offset":2887},"end":{"line":101,"column":121,"offset":2960}}},{"type":"raw","value":"<code class=\"language-text\">graph.render()</code>","position":{"start":{"line":101,"column":121,"offset":2960},"end":{"line":101,"column":137,"offset":2976}}},{"type":"text","value":" 之后将所有的节点通过 ","position":{"start":{"line":101,"column":137,"offset":2976},"end":{"line":101,"column":149,"offset":2988}}},{"type":"raw","value":"<code class=\"language-text\">toFront()</code>","position":{"start":{"line":101,"column":149,"offset":2988},"end":{"line":101,"column":160,"offset":2999}}},{"type":"text","value":" 函数提前。","position":{"start":{"line":101,"column":160,"offset":2999},"end":{"line":101,"column":166,"offset":3005}}}],"position":{"start":{"line":101,"column":1,"offset":2840},"end":{"line":101,"column":166,"offset":3005}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-5"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-5","aria-label":" 5 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>"}]}],"position":{"start":{"line":103,"column":1,"offset":3007},"end":{"line":103,"column":4,"offset":3010}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"函数描述"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%87%BD%E6%95%B0%E6%8F%8F%E8%BF%B0","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":104,"column":5,"offset":3015},"end":{"line":104,"column":9,"offset":3019}}}],"position":{"start":{"line":104,"column":1,"offset":3011},"end":{"line":104,"column":9,"offset":3019}}},{"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\">// 将节点实例 nodeItem 提前到其父级 group 的最前面</span>\nnodeItem<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 将节点实例 nodeItem 放置到其父级 group 的最后面</span>\nnodeItem<span class=\"token punctuation\">.</span><span class=\"token function\">toBack</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 将边实例 edgeItem 提前到其父级 group 的最前面</span>\nedgeItem<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 将边实例 edgeItem 放置到其父级 group 的最后面</span>\nedgeItem<span class=\"token punctuation\">.</span><span class=\"token function\">toBack</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":105,"column":1,"offset":3020},"end":{"line":114,"column":4,"offset":3257}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-6"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-6","aria-label":" 6 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>"}]}],"position":{"start":{"line":116,"column":1,"offset":3259},"end":{"line":116,"column":4,"offset":3262}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"书用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%B9%A6%E7%94%A8%E6%96%B9%E6%B3%95","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":117,"column":5,"offset":3267},"end":{"line":117,"column":9,"offset":3271}}}],"position":{"start":{"line":117,"column":1,"offset":3263},"end":{"line":117,"column":9,"offset":3271}}},{"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\">// const graph = ...</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<span class=\"token comment\">// 获取图上的所有边实例</span>\n<span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getNodes</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 遍历边实例，将所有边提前。</span>\nnodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</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><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 更改层级后需要重新绘制图</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":118,"column":1,"offset":3272},"end":{"line":130,"column":4,"offset":3485}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":" ","position":{"start":{"line":131,"column":1,"offset":3486},"end":{"line":131,"column":2,"offset":3487}}},{"type":"raw","value":"<br />","position":{"start":{"line":131,"column":2,"offset":3487},"end":{"line":131,"column":8,"offset":3493}}},{"type":"text","value":"这样，所有节点被绘制在边上层：","position":{"start":{"line":131,"column":8,"offset":3493},"end":{"line":131,"column":23,"offset":3508}}},{"type":"raw","value":"<br />","position":{"start":{"line":131,"column":23,"offset":3508},"end":{"line":131,"column":29,"offset":3514}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/156681/1571629345940-a061711c-a9d3-4ce2-a731-3acd29626666.png#align=left&display=inline&height=151&name=image.png&originHeight=302&originWidth=222&search=&size=22972&status=done&width=111","alt":"image.png"},"children":[],"position":{"start":{"line":131,"column":29,"offset":3514},"end":{"line":131,"column":269,"offset":3754}}}],"position":{"start":{"line":131,"column":1,"offset":3486},"end":{"line":131,"column":269,"offset":3754}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-7"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-7","aria-label":" 7 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>"}]}],"position":{"start":{"line":133,"column":1,"offset":3756},"end":{"line":133,"column":4,"offset":3759}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"step-3-监听鼠标事件并改变目标元素层级"},"children":[{"type":"element","tagName":"a","properties":{"href":"#step-3-%E7%9B%91%E5%90%AC%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E5%B9%B6%E6%94%B9%E5%8F%98%E7%9B%AE%E6%A0%87%E5%85%83%E7%B4%A0%E5%B1%82%E7%BA%A7","aria-label":"step 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":"Step 3 监听鼠标事件并改变目标元素层级","position":{"start":{"line":134,"column":4,"offset":3763},"end":{"line":134,"column":26,"offset":3785}}}],"position":{"start":{"line":134,"column":1,"offset":3760},"end":{"line":134,"column":26,"offset":3785}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在效果图中，鼠标进入节点时，相关边和节点的层级被提升到最上层，鼠标离开节点使恢复。边同理。这一步将实现这一交互效果。","position":{"start":{"line":135,"column":1,"offset":3786},"end":{"line":135,"column":59,"offset":3844}}}],"position":{"start":{"line":135,"column":1,"offset":3786},"end":{"line":135,"column":59,"offset":3844}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-8"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-8","aria-label":" 8 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>"}]}],"position":{"start":{"line":137,"column":1,"offset":3846},"end":{"line":137,"column":4,"offset":3849}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"函数描述-1"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%87%BD%E6%95%B0%E6%8F%8F%E8%BF%B0-1","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":"函数描述","position":{"start":{"line":138,"column":5,"offset":3854},"end":{"line":138,"column":9,"offset":3858}}}],"position":{"start":{"line":138,"column":1,"offset":3850},"end":{"line":138,"column":9,"offset":3858}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"使用下面四个函数监听鼠标的进入、离开元素的事件： ","position":{"start":{"line":139,"column":1,"offset":3859},"end":{"line":139,"column":26,"offset":3884}}}],"position":{"start":{"line":139,"column":1,"offset":3859},"end":{"line":139,"column":26,"offset":3884}}},{"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\">// 鼠标进入节点事件</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 comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 鼠标离开节点事件</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">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 comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 鼠标进入边事件</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">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 comment\">// ...</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 鼠标离开边事件</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">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 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":140,"column":1,"offset":3885},"end":{"line":160,"column":4,"offset":4147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"-9"},"children":[{"type":"element","tagName":"a","properties":{"href":"#-9","aria-label":" 9 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>"}]}],"position":{"start":{"line":162,"column":1,"offset":4149},"end":{"line":162,"column":4,"offset":4152}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"使用方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95","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":163,"column":5,"offset":4157},"end":{"line":163,"column":9,"offset":4161}}}],"position":{"start":{"line":163,"column":1,"offset":4153},"end":{"line":163,"column":9,"offset":4161}}},{"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\">// 鼠标进入节点事件</span>\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 comment\">// 获得鼠标当前目标边</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 <span class=\"token comment\">// 该边的起始点</span>\n <span class=\"token keyword\">const</span> source <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span><span class=\"token function\">getSource</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 该边的结束点</span>\n <span class=\"token keyword\">const</span> target <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span><span class=\"token function\">getTarget</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。</span>\n edge<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n source<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n target<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 注意：必须调用以根据新的层级顺序重绘</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</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><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 comment\">// 获得图上所有边实例</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getEdges</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 遍历边，将所有边的层级放置在后方，以恢复原样</span>\n edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n edge<span class=\"token punctuation\">.</span><span class=\"token function\">toBack</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><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 注意：必须调用以根据新的层级顺序重绘</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</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><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: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 comment\">// 获得鼠标当前目标节点</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 <span class=\"token comment\">// 获取该节点的所有相关边</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getEdges</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果</span>\n edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n edge<span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n edge<span class=\"token punctuation\">.</span><span class=\"token function\">getSource</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toFront</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n edge<span class=\"token punctuation\">.</span><span class=\"token function\">getTarget</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">toFront</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><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 注意：必须调用以根据新的层级顺序重绘</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</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><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 comment\">// 获得图上所有边实例</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getEdges</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 遍历边，将所有边的层级放置在后方，以恢复原样</span>\n edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n edge<span class=\"token punctuation\">.</span><span class=\"token function\">toBack</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><span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 注意：必须调用以根据新的层级顺序重绘</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</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><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":164,"column":1,"offset":4162},"end":{"line":217,"column":4,"offset":5264}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":218,"column":1,"offset":5265}}}}