@antv/g6
Version:
graph visualization frame work
1 lines • 50.5 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-ca9f98d4584be683cc7e4e1a22866162-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Feature 自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":50,"offset":50}}}],"position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":50,"offset":50}}},{"type":"text","value":"\n"}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":50,"offset":50}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考","position":{"start":{"line":5,"column":1,"offset":53},"end":{"line":5,"column":68,"offset":120}}},{"type":"element","tagName":"a","properties":{"href":"https://github.com/antvis/g6/blob/master/demos/drag-group.html","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Demo","position":{"start":{"line":5,"column":69,"offset":121},"end":{"line":5,"column":73,"offset":125}}}],"position":{"start":{"line":5,"column":68,"offset":120},"end":{"line":5,"column":138,"offset":190}}},{"type":"text","value":"。","position":{"start":{"line":5,"column":138,"offset":190},"end":{"line":5,"column":139,"offset":191}}},{"type":"raw","value":"<br />","position":{"start":{"line":5,"column":139,"offset":191},"end":{"line":5,"column":145,"offset":197}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/244306/1567391660645-308be946-1119-45c0-af7c-5373e78ffa7c.gif#align=left&display=inline&height=533&name=group2.gif&originHeight=533&originWidth=763&search=&size=261828&status=done&width=763","alt":"group2.gif"},"children":[],"position":{"start":{"line":5,"column":145,"offset":197},"end":{"line":5,"column":388,"offset":440}}}],"position":{"start":{"line":5,"column":1,"offset":53},"end":{"line":5,"column":388,"offset":440}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"数据结构"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84","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":7,"column":5,"offset":446},"end":{"line":7,"column":9,"offset":450}}}],"position":{"start":{"line":7,"column":1,"offset":442},"end":{"line":7,"column":9,"offset":450}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分组及各分组之间的层级关系。","position":{"start":{"line":8,"column":1,"offset":451},"end":{"line":8,"column":109,"offset":559}}}],"position":{"start":{"line":8,"column":1,"offset":451},"end":{"line":8,"column":109,"offset":559}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当 groups 中的对象包括 title 属性字段时，表示要渲染带有标题的分组，title 字段的类型可以是 string 或 object：","position":{"start":{"line":10,"column":1,"offset":561},"end":{"line":10,"column":73,"offset":633}}}],"position":{"start":{"line":10,"column":1,"offset":561},"end":{"line":10,"column":73,"offset":633}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"title：类型为 string 时，值表示标题名称，不能设置任何样式，也不能调整标题位置；","position":{"start":{"line":12,"column":3,"offset":637},"end":{"line":12,"column":49,"offset":683}}}],"position":{"start":{"line":12,"column":1,"offset":635},"end":{"line":12,"column":49,"offset":683}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"title 为 object 时，可以设置标题的样式及位置，title 中各字段含义：","position":{"start":{"line":13,"column":3,"offset":686},"end":{"line":13,"column":46,"offset":729}}}],"position":{"start":{"line":13,"column":3,"offset":686},"end":{"line":13,"column":46,"offset":729}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"text：必选，分组的标题，类型为 string；","position":{"start":{"line":14,"column":5,"offset":734},"end":{"line":14,"column":30,"offset":759}}}],"position":{"start":{"line":14,"column":3,"offset":732},"end":{"line":14,"column":30,"offset":759}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"offsetX：可选，默认为 0，表示 x 方向上的偏移量；","position":{"start":{"line":15,"column":5,"offset":764},"end":{"line":15,"column":35,"offset":794}}}],"position":{"start":{"line":15,"column":3,"offset":762},"end":{"line":15,"column":35,"offset":794}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"offsetY：可选，默认为 0，表示 y 方向上的偏移量；","position":{"start":{"line":16,"column":5,"offset":799},"end":{"line":16,"column":35,"offset":829}}}],"position":{"start":{"line":16,"column":3,"offset":797},"end":{"line":16,"column":35,"offset":829}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"stroke：字体边框颜色，同时也支持 fill、fontSize 等所有的","position":{"start":{"line":17,"column":5,"offset":834},"end":{"line":17,"column":43,"offset":872}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/gs4gno","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"文本样式属性","position":{"start":{"line":17,"column":44,"offset":873},"end":{"line":17,"column":50,"offset":879}}}],"position":{"start":{"line":17,"column":43,"offset":872},"end":{"line":17,"column":89,"offset":918}}},{"type":"text","value":"。","position":{"start":{"line":17,"column":89,"offset":918},"end":{"line":17,"column":90,"offset":919}}}],"position":{"start":{"line":17,"column":3,"offset":832},"end":{"line":17,"column":90,"offset":919}}},{"type":"text","value":"\n"}],"position":{"start":{"line":14,"column":3,"offset":732},"end":{"line":17,"column":90,"offset":919}}},{"type":"text","value":"\n"}],"position":{"start":{"line":13,"column":1,"offset":684},"end":{"line":17,"column":90,"offset":919}}},{"type":"text","value":"\n"}],"position":{"start":{"line":12,"column":1,"offset":635},"end":{"line":17,"column":90,"offset":919}}},{"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 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 label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</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>\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 label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</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\">100</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 label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</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 source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n groups<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\">'group1'</span><span class=\"token punctuation\">,</span>\n title<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n \ttext<span class=\"token punctuation\">:</span> <span class=\"token string\">'第一个分组'</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#444'</span><span class=\"token punctuation\">,</span>\n offsetX<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n offsetY<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n parentId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p1'</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\">'group2'</span><span class=\"token punctuation\">,</span>\n parentId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p1'</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\">'p1'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":21,"column":1,"offset":923},"end":{"line":72,"column":4,"offset":1611}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"如何渲染-group"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%A6%82%E4%BD%95%E6%B8%B2%E6%9F%93-group","aria-label":"如何渲染 group 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":"如何渲染 group","position":{"start":{"line":74,"column":5,"offset":1617},"end":{"line":74,"column":15,"offset":1627}}}],"position":{"start":{"line":74,"column":1,"offset":1613},"end":{"line":74,"column":15,"offset":1627}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当 nodes 中存在 ","position":{"start":{"line":75,"column":1,"offset":1628},"end":{"line":75,"column":13,"offset":1640}}},{"type":"raw","value":"<code class=\"language-text\">groupId</code>","position":{"start":{"line":75,"column":13,"offset":1640},"end":{"line":75,"column":22,"offset":1649}}},{"type":"text","value":" 属性字段时，在渲染过程中，G6 就会自动去渲染分组，当存在 groups 属性时，G6 就会自定去判断各分组之间的层级关系，并渲染出嵌套的分组。但当没有使用任何布局的时候，需要在 nodes 中指定各个阶段的坐标信息，即阶段的 ","position":{"start":{"line":75,"column":22,"offset":1649},"end":{"line":75,"column":137,"offset":1764}}},{"type":"raw","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":75,"column":137,"offset":1764},"end":{"line":75,"column":140,"offset":1767}}},{"type":"text","value":" 和 ","position":{"start":{"line":75,"column":140,"offset":1767},"end":{"line":75,"column":143,"offset":1770}}},{"type":"raw","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":75,"column":143,"offset":1770},"end":{"line":75,"column":146,"offset":1773}}},{"type":"text","value":" 属性值。","position":{"start":{"line":75,"column":146,"offset":1773},"end":{"line":75,"column":151,"offset":1778}}}],"position":{"start":{"line":75,"column":1,"offset":1628},"end":{"line":75,"column":151,"offset":1778}}},{"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\">'node6'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group3'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</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\">300</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 label<span class=\"token punctuation\">:</span> <span class=\"token string\">'fck'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</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 <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\">'node9'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'noGroup1'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p1'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">210</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 label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</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 <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 label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</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 <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\">'node7'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p1'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node7-p1'</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 <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\">'node10'</span><span class=\"token punctuation\">,</span>\n label<span class=\"token punctuation\">:</span> <span class=\"token string\">'noGroup'</span><span class=\"token punctuation\">,</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">210</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 source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</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 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <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 groups<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\">'group1'</span><span class=\"token punctuation\">,</span>\n title<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n text<span class=\"token punctuation\">:</span> <span class=\"token string\">'第一个分组'</span><span class=\"token punctuation\">,</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#444'</span><span class=\"token punctuation\">,</span>\n offsetX<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n offsetY<span class=\"token punctuation\">:</span> <span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n parentId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p1'</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\">'group2'</span><span class=\"token punctuation\">,</span>\n parentId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p1'</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\">'group3'</span><span class=\"token punctuation\">,</span>\n parentId<span class=\"token punctuation\">:</span> <span class=\"token string\">'p2'</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\">'p1'</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\">'p2'</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 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 pixelRatio<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'circleNode'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n color<span class=\"token punctuation\">:</span> <span class=\"token string\">'#bae7ff'</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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":77,"column":1,"offset":1780},"end":{"line":186,"column":4,"offset":3318}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"渲染的效果如下图所示：","position":{"start":{"line":188,"column":1,"offset":3320},"end":{"line":188,"column":12,"offset":3331}}},{"type":"raw","value":"<br />","position":{"start":{"line":188,"column":12,"offset":3331},"end":{"line":188,"column":18,"offset":3337}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/244306/1571190983755-4599403c-7c3d-4c23-9539-e91a5c038984.png#align=left&display=inline&height=503&name=image.png&originHeight=1006&originWidth=1600&search=&size=415977&status=done&width=800","alt":"image.png"},"children":[],"position":{"start":{"line":188,"column":18,"offset":3337},"end":{"line":188,"column":261,"offset":3580}}},{"type":"raw","value":"<br />","position":{"start":{"line":188,"column":261,"offset":3580},"end":{"line":188,"column":267,"offset":3586}}},{"type":"text","value":"此时，不能对分组中的节点及分组进行任何操作，接下来，我们介绍可以对分组进行的各种操作。","position":{"start":{"line":188,"column":267,"offset":3586},"end":{"line":188,"column":310,"offset":3629}}}],"position":{"start":{"line":188,"column":1,"offset":3320},"end":{"line":188,"column":310,"offset":3629}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"操作分组"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%93%8D%E4%BD%9C%E5%88%86%E7%BB%84","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":190,"column":5,"offset":3635},"end":{"line":190,"column":9,"offset":3639}}}],"position":{"start":{"line":190,"column":1,"offset":3631},"end":{"line":190,"column":9,"offset":3639}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"只是简单地将分组渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现分组的价值。","position":{"start":{"line":191,"column":1,"offset":3640},"end":{"line":191,"column":54,"offset":3693}}}],"position":{"start":{"line":191,"column":1,"offset":3640},"end":{"line":191,"column":54,"offset":3693}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 G6 中，我们内置了 ","position":{"start":{"line":193,"column":1,"offset":3695},"end":{"line":193,"column":14,"offset":3708}}},{"type":"raw","value":"<code class=\"language-text\">drag-group</code>","position":{"start":{"line":193,"column":14,"offset":3708},"end":{"line":193,"column":26,"offset":3720}}},{"type":"text","value":"、","position":{"start":{"line":193,"column":26,"offset":3720},"end":{"line":193,"column":27,"offset":3721}}},{"type":"raw","value":"<code class=\"language-text\">collapse-expand-group</code>","position":{"start":{"line":193,"column":27,"offset":3721},"end":{"line":193,"column":50,"offset":3744}}},{"type":"text","value":" 及 ","position":{"start":{"line":193,"column":50,"offset":3744},"end":{"line":193,"column":54,"offset":3748}}},{"type":"raw","value":"<code class=\"language-text\">drag-node-with-group</code>","position":{"start":{"line":193,"column":54,"offset":3748},"end":{"line":193,"column":76,"offset":3770}}},{"type":"text","value":" 三个","position":{"start":{"line":193,"column":76,"offset":3770},"end":{"line":193,"column":80,"offset":3774}}},{"type":"element","tagName":"a","properties":{"href":"./defaultBehavior"},"children":[{"type":"text","value":"Behavior","position":{"start":{"line":193,"column":81,"offset":3775},"end":{"line":193,"column":89,"offset":3783}}}],"position":{"start":{"line":193,"column":80,"offset":3774},"end":{"line":193,"column":109,"offset":3803}}},{"type":"text","value":"，共支持以下的交互行为：","position":{"start":{"line":193,"column":109,"offset":3803},"end":{"line":193,"column":121,"offset":3815}}}],"position":{"start":{"line":193,"column":1,"offset":3695},"end":{"line":193,"column":121,"offset":3815}}},{"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":195,"column":3,"offset":3819},"end":{"line":195,"column":8,"offset":3824}}}],"position":{"start":{"line":195,"column":1,"offset":3817},"end":{"line":195,"column":8,"offset":3824}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"通过拖拽，动态改变分组中的节点数量及分组大小；","position":{"start":{"line":196,"column":3,"offset":3827},"end":{"line":196,"column":26,"offset":3850}}}],"position":{"start":{"line":196,"column":1,"offset":3825},"end":{"line":196,"column":26,"offset":3850}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"将一个分组从父分组中拖拽出来，并取消分组直接的关联关系，动态改变父分组的大小；","position":{"start":{"line":197,"column":3,"offset":3853},"end":{"line":197,"column":42,"offset":3892}}}],"position":{"start":{"line":197,"column":1,"offset":3851},"end":{"line":197,"column":42,"offset":3892}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"双击分组，收起和展开分组：","position":{"start":{"line":198,"column":3,"offset":3895},"end":{"line":198,"column":16,"offset":3908}}}],"position":{"start":{"line":198,"column":3,"offset":3895},"end":{"line":198,"column":16,"offset":3908}}},{"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":199,"column":5,"offset":3913},"end":{"line":199,"column":30,"offset":3938}}}],"position":{"start":{"line":199,"column":3,"offset":3911},"end":{"line":199,"column":30,"offset":3938}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"展开分组后，恢复之前的连接和位置。","position":{"start":{"line":200,"column":5,"offset":3943},"end":{"line":200,"column":22,"offset":3960}}}],"position":{"start":{"line":200,"column":3,"offset":3941},"end":{"line":200,"column":22,"offset":3960}}},{"type":"text","value":"\n"}],"position":{"start":{"line":199,"column":3,"offset":3911},"end":{"line":200,"column":22,"offset":3960}}},{"type":"text","value":"\n"}],"position":{"start":{"line":198,"column":1,"offset":3893},"end":{"line":200,"column":22,"offset":3960}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"拖动节点，所在的分组高亮，当拖到其他分组时，其他分组高亮；","position":{"start":{"line":201,"column":3,"offset":3963},"end":{"line":201,"column":32,"offset":3992}}}],"position":{"start":{"line":201,"column":1,"offset":3961},"end":{"line":201,"column":32,"offset":3992}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"[暂不支持]","position":{"start":{"line":202,"column":4,"offset":3996},"end":{"line":202,"column":8,"offset":4000}}},{"type":"text","value":" ","position":{"start":{"line":202,"column":9,"offset":4001},"end":{"line":202,"column":10,"offset":4002}}},{"type":"element","tagName":"del","properties":{},"children":[{"type":"text","value":"将分组拖入到另外个分组，并改变分组层级的所属关系","position":{"start":{"line":202,"column":12,"offset":4004},"end":{"line":202,"column":36,"offset":4028}}}],"position":{"start":{"line":202,"column":10,"offset":4002},"end":{"line":202,"column":38,"offset":4030}}},{"type":"text","value":"。","position":{"start":{"line":202,"column":38,"offset":4030},"end":{"line":202,"column":39,"offset":4031}}}],"position":{"start":{"line":202,"column":1,"offset":3993},"end":{"line":202,"column":39,"offset":4031}}},{"type":"text","value":"\n"}],"position":{"start":{"line":195,"column":1,"offset":3817},"end":{"line":202,"column":39,"offset":4031}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"drag-group"},"children":[{"type":"element","tagName":"a","properties":{"href":"#drag-group","aria-label":"drag group 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":"drag-group","position":{"start":{"line":204,"column":6,"offset":4038},"end":{"line":204,"column":16,"offset":4048}}}],"position":{"start":{"line":204,"column":1,"offset":4033},"end":{"line":204,"column":16,"offset":4048}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">drag-group</code>","position":{"start":{"line":205,"column":1,"offset":4049},"end":{"line":205,"column":13,"offset":4061}}},{"type":"text","value":" Behavior，支持拖动分组，拖动分组过程中，会动态改变分组中节点和边的位置，在拖拽完成以后，保持分组和节点的相对位置不变。","position":{"start":{"line":205,"column":13,"offset":4061},"end":{"line":205,"column":77,"offset":4125}}}],"position":{"start":{"line":205,"column":1,"offset":4049},"end":{"line":205,"column":77,"offset":4125}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"collapse-expand-group"},"children":[{"type":"element","tagName":"a","properties":{"href":"#collapse-expand-group","aria-label":"collapse expand group 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":"collapse-expand-group","position":{"start":{"line":207,"column":6,"offset":4132},"end":{"line":207,"column":27,"offset":4153}}}],"position":{"start":{"line":207,"column":1,"offset":4127},"end":{"line":207,"column":27,"offset":4153}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">collapse-expand-group</code>","position":{"start":{"line":208,"column":1,"offset":4154},"end":{"line":208,"column":24,"offset":4177}}},{"type":"text","value":" Behavior，支持双击分组收起和展开分组，收起分组以后，隐藏分组中的所有节点，外部节点和分组中节点有连线的情况下，所有连接会连接到分组上面。","position":{"start":{"line":208,"column":24,"offset":4177},"end":{"line":208,"column":97,"offset":4250}}}],"position":{"start":{"line":208,"column":1,"offset":4154},"end":{"line":208,"column":97,"offset":4250}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"优化目前只支持双击交互，正式发布时，会支持用户自定义交互方式，来实现分组的收起和展开。","position":{"start":{"line":210,"column":1,"offset":4252},"end":{"line":210,"column":44,"offset":4295}}}],"position":{"start":{"line":210,"column":1,"offset":4252},"end":{"line":210,"column":44,"offset":4295}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"drag-node-with-group"},"children":[{"type":"element","tagName":"a","properties":{"href":"#drag-node-with-group","aria-label":"drag node with group 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":"drag-node-with-group","position":{"start":{"line":212,"column":6,"offset":4302},"end":{"line":212,"column":26,"offset":4322}}}],"position":{"start":{"line":212,"column":1,"offset":4297},"end":{"line":212,"column":26,"offset":4322}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">drag-node-with-group</code>","position":{"start":{"line":213,"column":1,"offset":4323},"end":{"line":213,"column":23,"offset":4345}}},{"type":"text","value":" Behavior 和 ","position":{"start":{"line":213,"column":23,"offset":4345},"end":{"line":213,"column":35,"offset":4357}}},{"type":"raw","value":"<code class=\"language-text\">drag-node</code>","position":{"start":{"line":213,"column":35,"offset":4357},"end":{"line":213,"column":46,"offset":4368}}},{"type":"text","value":" 类似，但该 Behavior 仅用于用 group 时 node 的拖拽。拖拽 node 过程中，会动态改变 node 所在的分组。","position":{"start":{"line":213,"column":46,"offset":4368},"end":{"line":213,"column":113,"offset":4435}}}],"position":{"start":{"line":213,"column":1,"offset":4323},"end":{"line":213,"column":113,"offset":4435}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"优化目前暂不支持将多个节点拖出拖入到分组中。","position":{"start":{"line":215,"column":1,"offset":4437},"end":{"line":215,"column":23,"offset":4459}}}],"position":{"start":{"line":215,"column":1,"offset":4437},"end":{"line":215,"column":23,"offset":4459}}},{"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 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 pixelRatio<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'drag-group'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'collapse-expand-group'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'drag- node-with-group'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'circleNode'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n color<span class=\"token punctuation\">:</span> <span class=\"token string\">'#bae7ff'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":217,"column":1,"offset":4461},"end":{"line":233,"column":4,"offset":4767}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将这三个内置提供的 Behavior 加入到 modes 中以后的效果如下图所示。","position":{"start":{"line":235,"column":1,"offset":4769},"end":{"line":235,"column":42,"offset":4810}}}],"position":{"start":{"line":235,"column":1,"offset":4769},"end":{"line":235,"column":42,"offset":4810}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/244306/1567391075518-249e7649-5861-41ec-9e81-ea58224de9cb.gif#align=left&display=inline&height=533&name=group2.gif&originHeight=533&originWidth=763&search=&size=261828&status=done&width=763","alt":"group2.gif"},"children":[],"position":{"start":{"line":237,"column":1,"offset":4812},"end":{"line":237,"column":244,"offset":5055}}}],"position":{"start":{"line":237,"column":1,"offset":4812},"end":{"line":237,"column":244,"offset":5055}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"适用的场景"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%80%82%E7%94%A8%E7%9A%84%E5%9C%BA%E6%99%AF","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":239,"column":5,"offset":5061},"end":{"line":239,"column":10,"offset":5066}}}],"position":{"start":{"line":239,"column":1,"offset":5057},"end":{"line":239,"column":10,"offset":5066}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"风控、反洗钱、保险骗保、网络诈骗、信用卡诈骗等场景下团伙分析；","position":{"start":{"line":241,"column":4,"offset":5071},"end":{"line":241,"column":35,"offset":5102}}}],"position":{"start":{"line":241,"column":1,"offset":5068},"end":{"line":241,"column":35,"offset":5102}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"特征分析：同一个分组中的节点在某些特征上面比较相似；","position":{"start":{"line":242,"column":4,"offset":5106},"end":{"line":242,"column":30,"offset":5132}}}],"position":{"start":{"line":242,"column":1,"offset":5103},"end":{"line":242,"column":30,"offset":5132}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。","position":{"start":{"line":243,"column":4,"offset":5136},"end":{"line":243,"column":42,"offset":5174}}}],"position":{"start":{"line":243,"column":1,"offset":5133},"end":{"line":243,"column":42,"offset":5174}}},{"type":"text","value":"\n"}],"position":{"start":{"line":241,"column":1,"offset":5068},"end":{"line":243,"column":42,"offset":5174}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":245,"column":1,"offset":5176}}}}