@antv/g6
Version:
graph visualization frame work
1 lines • 16.2 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-33748e8589f77a4336d9a65c54d902fb-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>CustomGroup 为节点分组，支持 Circle 和 Rect 两种类型。用户可通过 CustomGroup 创建节点分组、设置分组的样式、计算分组的坐标及宽高、收起和展开分组。</p>\n<p>分组默认是根据数据自动渲染的，当数据中存在 <code class=\"language-text\">groups</code> 时根据 <code class=\"language-text\">groups</code> 字段渲染分组，当不存在 <code class=\"language-text\">groups</code> 时，则根据 <code class=\"language-text\">nodes</code> 数据中是否存在 <code class=\"language-text\">groupId</code> 来渲染分组。</p>\n<p>当需要通过手动创建分组时候，可以参考下面的文档。</p>\n<h2 id=\"customgroup-实例化\"><a href=\"#customgroup-%E5%AE%9E%E4%BE%8B%E5%8C%96\" aria-label=\"customgroup 实例化 permalink\" class=\"anchor\"><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></a>CustomGroup 实例化</h2>\n<p>CustomGroup 实例会在实例化 Graph 的过程中自动创建，不需要用户手动实例化。</p>\n<h2 id=\"配置项\"><a href=\"#%E9%85%8D%E7%BD%AE%E9%A1%B9\" aria-label=\"配置项 permalink\" class=\"anchor\"><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></a>配置项</h2>\n<p>在实例化 Graph 的时候，通过配置 <code class=\"language-text\">groupType</code> 和 <code class=\"language-text\">groupStyle</code> 来指定分组的类型及样式。</p>\n<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\">500</span><span class=\"token punctuation\">,</span>\n height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n groupType<span class=\"token punctuation\">:</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">,</span>\n groupStyle<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 punctuation\">}</span><span class=\"token punctuation\">,</span>\n hover<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n collapse<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h3 id=\"grouptype\"><a href=\"#grouptype\" aria-label=\"grouptype permalink\" class=\"anchor\"><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></a>groupType</h3>\n<p>groupType 属性用于指定分组的类型，默认为 <code class=\"language-text\">circle</code>，支持 <code class=\"language-text\">circle</code> 和 <code class=\"language-text\">rect</code>两种。</p>\n<p><strong>groupType 指定为 <code class=\"language-text\">circle</code> 时</strong>的效果如下。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/244306/1568080532182-5b70448c-ee95-4fdc-81ca-ffac68535c72.gif#align=left&display=inline&height=533&name=group2.gif&originHeight=533&originWidth=763&search=&size=261828&status=done&width=763' alt='download' width='600'/>\n<p><br /><strong>groupType 指定为 <code class=\"language-text\">rect</code> 时</strong>的效果如下图。<br />\n<img src='https://cdn.nlark.com/yuque/0/2019/gif/244306/1568080506714-79dc8f77-1423-4065-9212-918add95d3df.gif#align=left&display=inline&height=415&name=3.gif&originHeight=415&originWidth=514&search=&size=84184&status=done&width=514' alt='download' width='600'/></p>\n<h3 id=\"groupstyle\"><a href=\"#groupstyle\" aria-label=\"groupstyle permalink\" class=\"anchor\"><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></a>groupStyle</h3>\n<p><code class=\"language-text\">groupStyle</code> 用于指定分组在默认（default）、交互过程中（hover）及收起（collapse）状态下的样式。</p>\n<h4 id=\"通用属性\"><a href=\"#%E9%80%9A%E7%94%A8%E5%B1%9E%E6%80%A7\" aria-label=\"通用属性 permalink\" class=\"anchor\"><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></a>通用属性</h4>\n<p>default、hover 和 collapse 支持的所有通用的属性参考<a href=\"https://www.yuque.com/antv/g6/ffzwfp\" target=\"_self\" rel=\"nofollow\">这里</a>。除过这些通用的属性，default 和 collapse 分别还支持以下特有属性。</p>\n<h4 id=\"default\"><a href=\"#default\" aria-label=\"default permalink\" class=\"anchor\"><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></a>default</h4>\n<table>\n<thead>\n<tr>\n<th>属性名称</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>minDis</td>\n<td>距离右上角最小距离</td>\n<td>number</td>\n<td>不存在嵌套分组时使用该值</td>\n</tr>\n<tr>\n<td>maxDis</td>\n<td>距离右上角最大距离</td>\n<td>number</td>\n<td>存在嵌套分组时使用该值</td>\n</tr>\n</tbody>\n</table>\n<h4 id=\"collapse\"><a href=\"#collapse\" aria-label=\"collapse permalink\" class=\"anchor\"><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></a>collapse</h4>\n<table>\n<thead>\n<tr>\n<th>属性名称</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>r</td>\n<td>分组的半径</td>\n<td>number</td>\n<td>当 groupType 为 circle 时有效</td>\n</tr>\n<tr>\n<td>width</td>\n<td>分组宽度</td>\n<td>number</td>\n<td>当 groupType 为 rect 时有效</td>\n</tr>\n<tr>\n<td>height</td>\n<td>分组高度</td>\n<td>number</td>\n<td>当 groupType 为 rect 时有效</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"add--additem\"><a href=\"#add--additem\" aria-label=\"add additem permalink\" class=\"anchor\"><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></a>add / addItem</h2>\n<p>用于生成分组。</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>groupId</td>\n<td>分组ID</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>nodes</td>\n<td>分组中包含的节点或节点ID</td>\n<td>array</td>\n<td>节点实例或节点 ID</td>\n</tr>\n<tr>\n<td>type</td>\n<td>分组类型</td>\n<td>string</td>\n<td>默认 circle ，支持 circle 和 rect</td>\n</tr>\n<tr>\n<td>zIndex</td>\n<td>分组层级</td>\n<td>number</td>\n<td>默认 0</td>\n</tr>\n<tr>\n<td>title</td>\n<td>分组标题配置</td>\n<td>object</td>\n<td>string</td>\n</tr>\n</tbody>\n</table>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'xxxx000999'</span><span class=\"token punctuation\">,</span>\n nodes<span class=\"token punctuation\">,</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n title<span class=\"token punctuation\">:</span> <span class=\"token string\">'分组标题'</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\">''</span><span class=\"token punctuation\">,</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">,</span>\n offsetX<span class=\"token punctuation\">:</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span>\n offsetY<span class=\"token punctuation\">:</span> <span class=\"token number\">0</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>\n<h2 id=\"collapsegroup\"><a href=\"#collapsegroup\" aria-label=\"collapsegroup permalink\" class=\"anchor\"><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></a>collapseGroup</h2>\n<p>收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>groupId</td>\n<td>分组ID</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">collapseGroup</span><span class=\"token punctuation\">(</span><span class=\"token string\">'groupId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"expandgroup\"><a href=\"#expandgroup\" aria-label=\"expandgroup permalink\" class=\"anchor\"><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></a>expandGroup</h2>\n<p>展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。</p>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>含义</th>\n<th>类型</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>groupId</td>\n<td>分组ID</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">expandGroup</span><span class=\"token punctuation\">(</span><span class=\"token string\">'groupId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>"}