@antv/g6
Version:
graph visualization frame work
1 lines • 10.4 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ff7dea223bc2b8249d815dbfa2dd4f20-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p><span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\"> 注意：</span>\n<br />图形分组 Group 与 <a href=\"https://www.yuque.com/antv/g6/inxeg8\" target=\"_self\" rel=\"nofollow\">节点分组 Group</a> 虽然都名为 Group，但属于不同层次的概念。</p>\n<ul>\n<li>图形分组针对 <a href=\"https://www.yuque.com/antv/g6/shape-crycle\" target=\"_self\" rel=\"nofollow\">图形 Shape</a> 层次的分组；</li>\n<li><a href=\"https://www.yuque.com/antv/g6/inxeg8\" target=\"_self\" rel=\"nofollow\">节点分组 Group</a> 是针对 <a href=\"https://www.yuque.com/antv/g6/internal-node\" target=\"_self\" rel=\"nofollow\">节点</a> 的分组，与数据结构中的层次、分组对应。</li>\n</ul>\n<br />\n<h2 id=\"什么是图形分组-group\"><a href=\"#%E4%BB%80%E4%B9%88%E6%98%AF%E5%9B%BE%E5%BD%A2%E5%88%86%E7%BB%84-group\" aria-label=\"什么是图形分组 group 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>什么是图形分组 Group</h2>\n<p>图形分组 group 类似于 <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g\" target=\"_self\" rel=\"nofollow\">SVG 中的 </a><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g\" target=\"_self\" rel=\"nofollow\"><code class=\"language-text\"><g></code></a><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g\" target=\"_self\" rel=\"nofollow\"> 标签</a>：元素 <code class=\"language-text\">g</code> 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。</p>\n<p>在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 <code class=\"language-text\">nodeGroup</code> 的 group，所有的边属于同一个变量名为 <code class=\"language-text\">edgeGroup</code> 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。<br />如下图（左）三个节点属于 <code class=\"language-text\">nodeGroup</code> ，两条边属于 <code class=\"language-text\">edgeGroup</code> ， <code class=\"language-text\">nodeGroup</code> 层级高于 <code class=\"language-text\">edgeGroup</code> ，三个节点绘制在三条边的上层。下图（右）是（左）图的节点降低透明度后的效果，可以更清晰看到边绘制在节点下方。<br /><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571022038208-ed60e526-4024-4296-a701-10baf12c1a96.png#align=left&display=inline&height=49&name=image.png&originHeight=98&originWidth=234&search=&size=11663&status=done&width=117\" alt=\"image.png\"><img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571022296480-7e52e970-eaf6-457c-a36e-bbe736f201d3.png#align=left&display=inline&height=39&name=image.png&originHeight=78&originWidth=228&search=&size=11263&status=done&width=114\" alt=\"image.png\"></p>\n<blockquote>\n<p>（左）节点和边的图形分组 Group 演示。（右）给左图的节点降低了透明度。</p>\n</blockquote>\n<br />\n<h2 id=\"何时使用图形分组-group\"><a href=\"#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8%E5%9B%BE%E5%BD%A2%E5%88%86%E7%BB%84-group\" aria-label=\"何时使用图形分组 group 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>何时使用图形分组 Group</h2>\n<p><a href=\"https://www.yuque.com/antv/g6/self-node\" target=\"_self\" rel=\"nofollow\">自定义节点</a>、<a href=\"https://www.yuque.com/antv/g6/self-edge\" target=\"_self\" rel=\"nofollow\">自定义边</a>时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。<br />例如，如下图中的节点 A 有一个包含节点 A 中所有图形的 group，该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点，有一个包含节点 B 中所有图形的 group，该 group 包含了 circle 图形、rect 图形、文本图形。<br /></p>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571022867752-327b0c7e-6794-4e13-89d0-12f0639ca02b.png#align=left&display=inline&height=51&name=image.png&originHeight=102&originWidth=100&search=&size=8111&status=done&width=50' alt='img' width='100'/>\n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571023091514-246a313d-1018-43f8-b8c2-f830d4756df1.png#align=left&display=inline&height=56&name=image.png&originHeight=112&originWidth=104&search=&size=10499&status=done&width=52' alt='img' width='100'/>\n<br />\n<h2 id=\"如何使用图形分组-group\"><a href=\"#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E5%9B%BE%E5%BD%A2%E5%88%86%E7%BB%84-group\" aria-label=\"如何使用图形分组 group 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>如何使用图形分组 Group</h2>\n<p>以下方法将会在<a href=\"https://www.yuque.com/antv/g6/self-node\" target=\"_self\" rel=\"nofollow\">自定义节点</a>、<a href=\"https://www.yuque.com/antv/g6/self-edge\" target=\"_self\" rel=\"nofollow\">自定义边</a>时用到。</p>\n<h3 id=\"声明实例\"><a href=\"#%E5%A3%B0%E6%98%8E%E5%AE%9E%E4%BE%8B\" 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>声明实例</h3>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">const group = new Group(cfgs);</code></pre></div>\n<h3 id=\"实例方法\"><a href=\"#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95\" 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>实例方法</h3>\n<ul>\n<li>addGroup(cfgs)</li>\n</ul>\n<p>向分组中添加新的分组。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> subGroup <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addGroup</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</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<ul>\n<li>addShape(type, cfgs)</li>\n</ul>\n<p>向分组中添加新的图形。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> keyShape <span class=\"token operator\">=</span> group<span class=\"token punctuation\">.</span><span class=\"token function\">addShape</span><span class=\"token punctuation\">(</span><span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</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<p>提示：在分组上添加的 <code class=\"language-text\">clip</code>， <code class=\"language-text\">transform</code> 等会影响到该分组中的所有图形。</p>"}