@antv/g6
Version:
graph visualization frame work
1 lines • 53.2 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-ca9f98d4584be683cc7e4e1a22866162-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"Feature 自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。","position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":50,"offset":50},"indent":[]}}],"position":{"start":{"line":2,"column":3,"offset":3},"end":{"line":2,"column":50,"offset":50},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":50,"offset":50},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考","position":{"start":{"line":5,"column":1,"offset":53},"end":{"line":5,"column":68,"offset":120},"indent":[]}},{"type":"link","title":null,"url":"https://github.com/antvis/g6/blob/master/demos/drag-group.html","children":[{"type":"text","value":"Demo","position":{"start":{"line":5,"column":69,"offset":121},"end":{"line":5,"column":73,"offset":125},"indent":[]}}],"position":{"start":{"line":5,"column":68,"offset":120},"end":{"line":5,"column":138,"offset":190},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":5,"column":138,"offset":190},"end":{"line":5,"column":139,"offset":191},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":5,"column":139,"offset":191},"end":{"line":5,"column":145,"offset":197},"indent":[]}},{"type":"image","title":null,"url":"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","position":{"start":{"line":5,"column":145,"offset":197},"end":{"line":5,"column":388,"offset":440},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":53},"end":{"line":5,"column":388,"offset":440},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#数据结构","title":null,"children":[],"data":{"hProperties":{"aria-label":"数据结构 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"数据结构","position":{"start":{"line":7,"column":5,"offset":446},"end":{"line":7,"column":9,"offset":450},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":442},"end":{"line":7,"column":9,"offset":450},"indent":[]},"data":{"id":"数据结构","htmlAttributes":{"id":"数据结构"},"hProperties":{"id":"数据结构"}}},{"type":"paragraph","children":[{"type":"text","value":"新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分组及各分组之间的层级关系。","position":{"start":{"line":8,"column":1,"offset":451},"end":{"line":8,"column":109,"offset":559},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":451},"end":{"line":8,"column":109,"offset":559},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"当 groups 中的对象包括 title 属性字段时，表示要渲染带有标题的分组，title 字段的类型可以是 string 或 object：","position":{"start":{"line":10,"column":1,"offset":561},"end":{"line":10,"column":73,"offset":633},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":561},"end":{"line":10,"column":73,"offset":633},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"title：类型为 string 时，值表示标题名称，不能设置任何样式，也不能调整标题位置；","position":{"start":{"line":12,"column":3,"offset":637},"end":{"line":12,"column":49,"offset":683},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":637},"end":{"line":12,"column":49,"offset":683},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":635},"end":{"line":12,"column":49,"offset":683},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"title 为 object 时，可以设置标题的样式及位置，title 中各字段含义：","position":{"start":{"line":13,"column":3,"offset":686},"end":{"line":13,"column":46,"offset":729},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":686},"end":{"line":13,"column":46,"offset":729},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"text：必选，分组的标题，类型为 string；","position":{"start":{"line":14,"column":5,"offset":734},"end":{"line":14,"column":30,"offset":759},"indent":[]}}],"position":{"start":{"line":14,"column":5,"offset":734},"end":{"line":14,"column":30,"offset":759},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":732},"end":{"line":14,"column":30,"offset":759},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"offsetX：可选，默认为 0，表示 x 方向上的偏移量；","position":{"start":{"line":15,"column":5,"offset":764},"end":{"line":15,"column":35,"offset":794},"indent":[]}}],"position":{"start":{"line":15,"column":5,"offset":764},"end":{"line":15,"column":35,"offset":794},"indent":[]}}],"position":{"start":{"line":15,"column":3,"offset":762},"end":{"line":15,"column":35,"offset":794},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"offsetY：可选，默认为 0，表示 y 方向上的偏移量；","position":{"start":{"line":16,"column":5,"offset":799},"end":{"line":16,"column":35,"offset":829},"indent":[]}}],"position":{"start":{"line":16,"column":5,"offset":799},"end":{"line":16,"column":35,"offset":829},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":797},"end":{"line":16,"column":35,"offset":829},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"stroke：字体边框颜色，同时也支持 fill、fontSize 等所有的","position":{"start":{"line":17,"column":5,"offset":834},"end":{"line":17,"column":43,"offset":872},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/gs4gno","children":[{"type":"text","value":"文本样式属性","position":{"start":{"line":17,"column":44,"offset":873},"end":{"line":17,"column":50,"offset":879},"indent":[]}}],"position":{"start":{"line":17,"column":43,"offset":872},"end":{"line":17,"column":89,"offset":918},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":17,"column":89,"offset":918},"end":{"line":17,"column":90,"offset":919},"indent":[]}}],"position":{"start":{"line":17,"column":5,"offset":834},"end":{"line":17,"column":90,"offset":919},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":832},"end":{"line":17,"column":90,"offset":919},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":732},"end":{"line":17,"column":90,"offset":919},"indent":[3,3,3]}}],"position":{"start":{"line":13,"column":1,"offset":684},"end":{"line":17,"column":90,"offset":919},"indent":[1,1,1,1]}}],"position":{"start":{"line":12,"column":1,"offset":635},"end":{"line":17,"column":90,"offset":919},"indent":[1,1,1,1,1]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token 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},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#如何渲染-group","title":null,"children":[],"data":{"hProperties":{"aria-label":"如何渲染 group permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"如何渲染 group","position":{"start":{"line":74,"column":5,"offset":1617},"end":{"line":74,"column":15,"offset":1627},"indent":[]}}],"position":{"start":{"line":74,"column":1,"offset":1613},"end":{"line":74,"column":15,"offset":1627},"indent":[]},"data":{"id":"如何渲染-group","htmlAttributes":{"id":"如何渲染-group"},"hProperties":{"id":"如何渲染-group"}}},{"type":"paragraph","children":[{"type":"text","value":"当 nodes 中存在 ","position":{"start":{"line":75,"column":1,"offset":1628},"end":{"line":75,"column":13,"offset":1640},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">groupId</code>","position":{"start":{"line":75,"column":13,"offset":1640},"end":{"line":75,"column":22,"offset":1649},"indent":[]}},{"type":"text","value":" 属性字段时，在渲染过程中，G6 就会自动去渲染分组，当存在 groups 属性时，G6 就会自定去判断各分组之间的层级关系，并渲染出嵌套的分组。但当没有使用任何布局的时候，需要在 nodes 中指定各个阶段的坐标信息，即阶段的 ","position":{"start":{"line":75,"column":22,"offset":1649},"end":{"line":75,"column":137,"offset":1764},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">x</code>","position":{"start":{"line":75,"column":137,"offset":1764},"end":{"line":75,"column":140,"offset":1767},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":75,"column":140,"offset":1767},"end":{"line":75,"column":143,"offset":1770},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">y</code>","position":{"start":{"line":75,"column":143,"offset":1770},"end":{"line":75,"column":146,"offset":1773},"indent":[]}},{"type":"text","value":" 属性值。","position":{"start":{"line":75,"column":146,"offset":1773},"end":{"line":75,"column":151,"offset":1778},"indent":[]}}],"position":{"start":{"line":75,"column":1,"offset":1628},"end":{"line":75,"column":151,"offset":1778},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\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},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"渲染的效果如下图所示：","position":{"start":{"line":188,"column":1,"offset":3320},"end":{"line":188,"column":12,"offset":3331},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":188,"column":12,"offset":3331},"end":{"line":188,"column":18,"offset":3337},"indent":[]}},{"type":"image","title":null,"url":"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","position":{"start":{"line":188,"column":18,"offset":3337},"end":{"line":188,"column":261,"offset":3580},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":188,"column":261,"offset":3580},"end":{"line":188,"column":267,"offset":3586},"indent":[]}},{"type":"text","value":"此时，不能对分组中的节点及分组进行任何操作，接下来，我们介绍可以对分组进行的各种操作。","position":{"start":{"line":188,"column":267,"offset":3586},"end":{"line":188,"column":310,"offset":3629},"indent":[]}}],"position":{"start":{"line":188,"column":1,"offset":3320},"end":{"line":188,"column":310,"offset":3629},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#操作分组","title":null,"children":[],"data":{"hProperties":{"aria-label":"操作分组 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"操作分组","position":{"start":{"line":190,"column":5,"offset":3635},"end":{"line":190,"column":9,"offset":3639},"indent":[]}}],"position":{"start":{"line":190,"column":1,"offset":3631},"end":{"line":190,"column":9,"offset":3639},"indent":[]},"data":{"id":"操作分组","htmlAttributes":{"id":"操作分组"},"hProperties":{"id":"操作分组"}}},{"type":"paragraph","children":[{"type":"text","value":"只是简单地将分组渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现分组的价值。","position":{"start":{"line":191,"column":1,"offset":3640},"end":{"line":191,"column":54,"offset":3693},"indent":[]}}],"position":{"start":{"line":191,"column":1,"offset":3640},"end":{"line":191,"column":54,"offset":3693},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在 G6 中，我们内置了 ","position":{"start":{"line":193,"column":1,"offset":3695},"end":{"line":193,"column":14,"offset":3708},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">drag-group</code>","position":{"start":{"line":193,"column":14,"offset":3708},"end":{"line":193,"column":26,"offset":3720},"indent":[]}},{"type":"text","value":"、","position":{"start":{"line":193,"column":26,"offset":3720},"end":{"line":193,"column":27,"offset":3721},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">collapse-expand-group</code>","position":{"start":{"line":193,"column":27,"offset":3721},"end":{"line":193,"column":50,"offset":3744},"indent":[]}},{"type":"text","value":" 及 ","position":{"start":{"line":193,"column":50,"offset":3744},"end":{"line":193,"column":54,"offset":3748},"indent":[]}},{"type":"html","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},"indent":[]}},{"type":"text","value":" 三个","position":{"start":{"line":193,"column":76,"offset":3770},"end":{"line":193,"column":80,"offset":3774},"indent":[]}},{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"Behavior","position":{"start":{"line":193,"column":81,"offset":3775},"end":{"line":193,"column":89,"offset":3783},"indent":[]}}],"position":{"start":{"line":193,"column":80,"offset":3774},"end":{"line":193,"column":109,"offset":3803},"indent":[]}},{"type":"text","value":"，共支持以下的交互行为：","position":{"start":{"line":193,"column":109,"offset":3803},"end":{"line":193,"column":121,"offset":3815},"indent":[]}}],"position":{"start":{"line":193,"column":1,"offset":3695},"end":{"line":193,"column":121,"offset":3815},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"拖动分组；","position":{"start":{"line":195,"column":3,"offset":3819},"end":{"line":195,"column":8,"offset":3824},"indent":[]}}],"position":{"start":{"line":195,"column":3,"offset":3819},"end":{"line":195,"column":8,"offset":3824},"indent":[]}}],"position":{"start":{"line":195,"column":1,"offset":3817},"end":{"line":195,"column":8,"offset":3824},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"通过拖拽，动态改变分组中的节点数量及分组大小；","position":{"start":{"line":196,"column":3,"offset":3827},"end":{"line":196,"column":26,"offset":3850},"indent":[]}}],"position":{"start":{"line":196,"column":3,"offset":3827},"end":{"line":196,"column":26,"offset":3850},"indent":[]}}],"position":{"start":{"line":196,"column":1,"offset":3825},"end":{"line":196,"column":26,"offset":3850},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"将一个分组从父分组中拖拽出来，并取消分组直接的关联关系，动态改变父分组的大小；","position":{"start":{"line":197,"column":3,"offset":3853},"end":{"line":197,"column":42,"offset":3892},"indent":[]}}],"position":{"start":{"line":197,"column":3,"offset":3853},"end":{"line":197,"column":42,"offset":3892},"indent":[]}}],"position":{"start":{"line":197,"column":1,"offset":3851},"end":{"line":197,"column":42,"offset":3892},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"双击分组，收起和展开分组：","position":{"start":{"line":198,"column":3,"offset":3895},"end":{"line":198,"column":16,"offset":3908},"indent":[]}}],"position":{"start":{"line":198,"column":3,"offset":3895},"end":{"line":198,"column":16,"offset":3908},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"当收起分组后，与分组节点中的连线会自动连到分组上；","position":{"start":{"line":199,"column":5,"offset":3913},"end":{"line":199,"column":30,"offset":3938},"indent":[]}}],"position":{"start":{"line":199,"column":5,"offset":3913},"end":{"line":199,"column":30,"offset":3938},"indent":[]}}],"position":{"start":{"line":199,"column":3,"offset":3911},"end":{"line":199,"column":30,"offset":3938},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"展开分组后，恢复之前的连接和位置。","position":{"start":{"line":200,"column":5,"offset":3943},"end":{"line":200,"column":22,"offset":3960},"indent":[]}}],"position":{"start":{"line":200,"column":5,"offset":3943},"end":{"line":200,"column":22,"offset":3960},"indent":[]}}],"position":{"start":{"line":200,"column":3,"offset":3941},"end":{"line":200,"column":22,"offset":3960},"indent":[]}}],"position":{"start":{"line":199,"column":3,"offset":3911},"end":{"line":200,"column":22,"offset":3960},"indent":[3]}}],"position":{"start":{"line":198,"column":1,"offset":3893},"end":{"line":200,"column":22,"offset":3960},"indent":[1,1]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"拖动节点，所在的分组高亮，当拖到其他分组时，其他分组高亮；","position":{"start":{"line":201,"column":3,"offset":3963},"end":{"line":201,"column":32,"offset":3992},"indent":[]}}],"position":{"start":{"line":201,"column":3,"offset":3963},"end":{"line":201,"column":32,"offset":3992},"indent":[]}}],"position":{"start":{"line":201,"column":1,"offset":3961},"end":{"line":201,"column":32,"offset":3992},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"linkReference","identifier":"暂不支持","label":"暂不支持","referenceType":"shortcut","children":[{"type":"text","value":"暂不支持","position":{"start":{"line":202,"column":4,"offset":3996},"end":{"line":202,"column":8,"offset":4000},"indent":[]}}],"position":{"start":{"line":202,"column":3,"offset":3995},"end":{"line":202,"column":9,"offset":4001},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":202,"column":9,"offset":4001},"end":{"line":202,"column":10,"offset":4002},"indent":[]}},{"type":"delete","children":[{"type":"text","value":"将分组拖入到另外个分组，并改变分组层级的所属关系","position":{"start":{"line":202,"column":12,"offset":4004},"end":{"line":202,"column":36,"offset":4028},"indent":[]}}],"position":{"start":{"line":202,"column":10,"offset":4002},"end":{"line":202,"column":38,"offset":4030},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":202,"column":38,"offset":4030},"end":{"line":202,"column":39,"offset":4031},"indent":[]}}],"position":{"start":{"line":202,"column":3,"offset":3995},"end":{"line":202,"column":39,"offset":4031},"indent":[]}}],"position":{"start":{"line":202,"column":1,"offset":3993},"end":{"line":202,"column":39,"offset":4031},"indent":[]}}],"position":{"start":{"line":195,"column":1,"offset":3817},"end":{"line":202,"column":39,"offset":4031},"indent":[1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#drag-group","title":null,"children":[],"data":{"hProperties":{"aria-label":"drag group permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"drag-group","position":{"start":{"line":204,"column":6,"offset":4038},"end":{"line":204,"column":16,"offset":4048},"indent":[]}}],"position":{"start":{"line":204,"column":1,"offset":4033},"end":{"line":204,"column":16,"offset":4048},"indent":[]},"data":{"id":"drag-group","htmlAttributes":{"id":"drag-group"},"hProperties":{"id":"drag-group"}}},{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">drag-group</code>","position":{"start":{"line":205,"column":1,"offset":4049},"end":{"line":205,"column":13,"offset":4061},"indent":[]}},{"type":"text","value":" Behavior，支持拖动分组，拖动分组过程中，会动态改变分组中节点和边的位置，在拖拽完成以后，保持分组和节点的相对位置不变。","position":{"start":{"line":205,"column":13,"offset":4061},"end":{"line":205,"column":77,"offset":4125},"indent":[]}}],"position":{"start":{"line":205,"column":1,"offset":4049},"end":{"line":205,"column":77,"offset":4125},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#collapse-expand-group","title":null,"children":[],"data":{"hProperties":{"aria-label":"collapse expand group permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"collapse-expand-group","position":{"start":{"line":207,"column":6,"offset":4132},"end":{"line":207,"column":27,"offset":4153},"indent":[]}}],"position":{"start":{"line":207,"column":1,"offset":4127},"end":{"line":207,"column":27,"offset":4153},"indent":[]},"data":{"id":"collapse-expand-group","htmlAttributes":{"id":"collapse-expand-group"},"hProperties":{"id":"collapse-expand-group"}}},{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">collapse-expand-group</code>","position":{"start":{"line":208,"column":1,"offset":4154},"end":{"line":208,"column":24,"offset":4177},"indent":[]}},{"type":"text","value":" Behavior，支持双击分组收起和展开分组，收起分组以后，隐藏分组中的所有节点，外部节点和分组中节点有连线的情况下，所有连接会连接到分组上面。","position":{"start":{"line":208,"column":24,"offset":4177},"end":{"line":208,"column":97,"offset":4250},"indent":[]}}],"position":{"start":{"line":208,"column":1,"offset":4154},"end":{"line":208,"column":97,"offset":4250},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"优化目前只支持双击交互，正式发布时，会支持用户自定义交互方式，来实现分组的收起和展开。","position":{"start":{"line":210,"column":1,"offset":4252},"end":{"line":210,"column":44,"offset":4295},"indent":[]}}],"position":{"start":{"line":210,"column":1,"offset":4252},"end":{"line":210,"column":44,"offset":4295},"indent":[]}},{"type":"heading","depth":4,"children":[{"type":"link","url":"#drag-node-with-group","title":null,"children":[],"data":{"hProperties":{"aria-label":"drag node with group permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"drag-node-with-group","position":{"start":{"line":212,"column":6,"offset":4302},"end":{"line":212,"column":26,"offset":4322},"indent":[]}}],"position":{"start":{"line":212,"column":1,"offset":4297},"end":{"line":212,"column":26,"offset":4322},"indent":[]},"data":{"id":"drag-node-with-group","htmlAttributes":{"id":"drag-node-with-group"},"hProperties":{"id":"drag-node-with-group"}}},{"type":"paragraph","children":[{"type":"html","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},"indent":[]}},{"type":"text","value":" Behavior 和 ","position":{"start":{"line":213,"column":23,"offset":4345},"end":{"line":213,"column":35,"offset":4357},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">drag-node</code>","position":{"start":{"line":213,"column":35,"offset":4357},"end":{"line":213,"column":46,"offset":4368},"indent":[]}},{"type":"text","value":" 类似，但该 Behavior 仅用于用 group 时 node 的拖拽。拖拽 node 过程中，会动态改变 node 所在的分组。","position":{"start":{"line":213,"column":46,"offset":4368},"end":{"line":213,"column":113,"offset":4435},"indent":[]}}],"position":{"start":{"line":213,"column":1,"offset":4323},"end":{"line":213,"column":113,"offset":4435},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"优化目前暂不支持将多个节点拖出拖入到分组中。","position":{"start":{"line":215,"column":1,"offset":4437},"end":{"line":215,"column":23,"offset":4459},"indent":[]}}],"position":{"start":{"line":215,"column":1,"offset":4437},"end":{"line":215,"column":23,"offset":4459},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> 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},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"将这三个内置提供的 Behavior 加入到 modes 中以后的效果如下图所示。","position":{"start":{"line":235,"column":1,"offset":4769},"end":{"line":235,"column":42,"offset":4810},"indent":[]}}],"position":{"start":{"line":235,"column":1,"offset":4769},"end":{"line":235,"column":42,"offset":4810},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":237,"column":1,"offset":4812},"end":{"line":237,"column":244,"offset":5055},"indent":[]}}],"position":{"start":{"line":237,"column":1,"offset":4812},"end":{"line":237,"column":244,"offset":5055},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#适用的场景","title":null,"children":[],"data":{"hProperties":{"aria-label":"适用的场景 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}},{"type":"text","value":"适用的场景","position":{"start":{"line":239,"column":5,"offset":5061},"end":{"line":239,"column":10,"offset":5066},"indent":[]}}],"position":{"start":{"line":239,"column":1,"offset":5057},"end":{"line":239,"column":10,"offset":5066},"indent":[]},"data":{"id":"适用的场景","htmlAttributes":{"id":"适用的场景"},"hProperties":{"id":"适用的场景"}}},{"type":"list","ordered":true,"start":1,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"风控、反洗钱、保险骗保、网络诈骗、信用卡诈骗等场景下团伙分析；","position":{"start":{"line":241,"column":4,"offset":5071},"end":{"line":241,"column":35,"offset":5102},"indent":[]}}],"position":{"start":{"line":241,"column":4,"offset":5071},"end":{"line":241,"column":35,"offset":5102},"indent":[]}}],"position":{"start":{"line":241,"column":1,"offset":5068},"end":{"line":241,"column":35,"offset":5102},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"特征分析：同一个分组中的节点在某些特征上面比较相似；","position":{"start":{"line":242,"column":4,"offset":5106},"end":{"line":242,"column":30,"offset":5132},"indent":[]}}],"position":{"start":{"line":242,"column":4,"offset":5106},"end":{"line":242,"column":30,"offset":5132},"indent":[]}}],"position":{"start":{"line":242,"column":1,"offset":5103},"end":{"line":242,"column":30,"offset":5132},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。","position":{"start":{"line":243,"column":4,"offset":5136},"end":{"line":243,"column":42,"offset":5174},"indent":[]}}],"position":{"start":{"line":243,"column":4,"offset":5136},"end":{"line":243,"column":42,"offset":5174},"indent":[]}}],"position":{"start":{"line":243,"column":1,"offset":5133},"end":{"line":243,"column":42,"offset":5174},"indent":[]}}],"position":{"start":{"line":241,"column":1,"offset":5068},"end":{"line":243,"column":42,"offset":5174},"indent":[1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":245,"column":1,"offset":5176}}}}