@antv/g6
Version:
graph visualization frame work
1 lines • 26.8 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-ff7dea223bc2b8249d815dbfa2dd4f20-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\">","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":77,"offset":77}}},{"type":"text","value":" ","position":{"start":{"line":2,"column":77,"offset":77},"end":{"line":2,"column":78,"offset":78}}},{"type":"text","value":" ","position":{"start":{"line":2,"column":78,"offset":78},"end":{"line":2,"column":84,"offset":84}}},{"type":"text","value":" ","position":{"start":{"line":2,"column":84,"offset":84},"end":{"line":2,"column":90,"offset":90}}},{"type":"text","value":"注意：","position":{"start":{"line":2,"column":90,"offset":90},"end":{"line":2,"column":93,"offset":93}}},{"type":"raw","value":"</span>","position":{"start":{"line":2,"column":93,"offset":93},"end":{"line":2,"column":100,"offset":100}}},{"type":"text","value":"\n","position":{"start":{"line":2,"column":100,"offset":100},"end":{"line":3,"column":1,"offset":101}}},{"type":"raw","value":"<br />","position":{"start":{"line":3,"column":1,"offset":101},"end":{"line":3,"column":7,"offset":107}}},{"type":"text","value":"图形分组 Group 与 ","position":{"start":{"line":3,"column":7,"offset":107},"end":{"line":3,"column":20,"offset":120}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/inxeg8","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"节点分组 Group","position":{"start":{"line":3,"column":21,"offset":121},"end":{"line":3,"column":31,"offset":131}}}],"position":{"start":{"line":3,"column":20,"offset":120},"end":{"line":3,"column":70,"offset":170}}},{"type":"text","value":" 虽然都名为 Group，但属于不同层次的概念。","position":{"start":{"line":3,"column":70,"offset":170},"end":{"line":3,"column":94,"offset":194}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":3,"column":94,"offset":194}}},{"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":5,"column":3,"offset":198},"end":{"line":5,"column":10,"offset":205}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/shape-crycle","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"图形 Shape","position":{"start":{"line":5,"column":11,"offset":206},"end":{"line":5,"column":19,"offset":214}}}],"position":{"start":{"line":5,"column":10,"offset":205},"end":{"line":5,"column":64,"offset":259}}},{"type":"text","value":" 层次的分组；","position":{"start":{"line":5,"column":64,"offset":259},"end":{"line":5,"column":71,"offset":266}}}],"position":{"start":{"line":5,"column":1,"offset":196},"end":{"line":5,"column":71,"offset":266}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/inxeg8","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"节点分组 Group","position":{"start":{"line":6,"column":4,"offset":270},"end":{"line":6,"column":14,"offset":280}}}],"position":{"start":{"line":6,"column":3,"offset":269},"end":{"line":6,"column":53,"offset":319}}},{"type":"text","value":" 是针对 ","position":{"start":{"line":6,"column":53,"offset":319},"end":{"line":6,"column":58,"offset":324}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/internal-node","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"节点","position":{"start":{"line":6,"column":59,"offset":325},"end":{"line":6,"column":61,"offset":327}}}],"position":{"start":{"line":6,"column":58,"offset":324},"end":{"line":6,"column":107,"offset":373}}},{"type":"text","value":" 的分组，与数据结构中的层次、分组对应。","position":{"start":{"line":6,"column":107,"offset":373},"end":{"line":6,"column":127,"offset":393}}}],"position":{"start":{"line":6,"column":1,"offset":267},"end":{"line":6,"column":127,"offset":393}}},{"type":"text","value":"\n"}],"position":{"start":{"line":5,"column":1,"offset":196},"end":{"line":6,"column":127,"offset":393}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />","position":{"start":{"line":8,"column":1,"offset":395},"end":{"line":8,"column":7,"offset":401}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"什么是图形分组-group"},"children":[{"type":"element","tagName":"a","properties":{"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"},"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":10,"column":4,"offset":406},"end":{"line":10,"column":17,"offset":419}}}],"position":{"start":{"line":10,"column":1,"offset":403},"end":{"line":10,"column":17,"offset":419}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"图形分组 group 类似于 ","position":{"start":{"line":11,"column":1,"offset":420},"end":{"line":11,"column":16,"offset":435}}},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"SVG 中的 ","position":{"start":{"line":11,"column":17,"offset":436},"end":{"line":11,"column":24,"offset":443}}}],"position":{"start":{"line":11,"column":16,"offset":435},"end":{"line":11,"column":85,"offset":504}}},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g","target":"_self","rel":"nofollow"},"children":[{"type":"raw","value":"<code class=\"language-text\"><g></code>","position":{"start":{"line":11,"column":86,"offset":505},"end":{"line":11,"column":91,"offset":510}}}],"position":{"start":{"line":11,"column":85,"offset":504},"end":{"line":11,"column":152,"offset":571}}},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/g","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":" 标签","position":{"start":{"line":11,"column":153,"offset":572},"end":{"line":11,"column":156,"offset":575}}}],"position":{"start":{"line":11,"column":152,"offset":571},"end":{"line":11,"column":217,"offset":636}}},{"type":"text","value":"：元素 ","position":{"start":{"line":11,"column":217,"offset":636},"end":{"line":11,"column":221,"offset":640}}},{"type":"raw","value":"<code class=\"language-text\">g</code>","position":{"start":{"line":11,"column":221,"offset":640},"end":{"line":11,"column":224,"offset":643}}},{"type":"text","value":" 是用来组合图形对象的容器。在 group 上添加变换（例如剪裁、旋转、放缩、平移等）会应用到其所有的子元素上。在 group 上添加属性（例如颜色、位置等）会被其所有的子元素继承。此外， group 可以多层嵌套使用，因此可以用来定义复杂的对象。","position":{"start":{"line":11,"column":224,"offset":643},"end":{"line":11,"column":348,"offset":767}}}],"position":{"start":{"line":11,"column":1,"offset":420},"end":{"line":11,"column":348,"offset":767}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 ","position":{"start":{"line":13,"column":1,"offset":769},"end":{"line":13,"column":35,"offset":803}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":13,"column":35,"offset":803},"end":{"line":13,"column":46,"offset":814}}},{"type":"text","value":" 的 group，所有的边属于同一个变量名为 ","position":{"start":{"line":13,"column":46,"offset":814},"end":{"line":13,"column":69,"offset":837}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":13,"column":69,"offset":837},"end":{"line":13,"column":80,"offset":848}}},{"type":"text","value":" 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。","position":{"start":{"line":13,"column":80,"offset":848},"end":{"line":13,"column":139,"offset":907}}},{"type":"raw","value":"<br />","position":{"start":{"line":13,"column":139,"offset":907},"end":{"line":13,"column":145,"offset":913}}},{"type":"text","value":"如下图（左）三个节点属于 ","position":{"start":{"line":13,"column":145,"offset":913},"end":{"line":13,"column":158,"offset":926}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":13,"column":158,"offset":926},"end":{"line":13,"column":169,"offset":937}}},{"type":"text","value":" ，两条边属于 ","position":{"start":{"line":13,"column":169,"offset":937},"end":{"line":13,"column":178,"offset":946}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":13,"column":178,"offset":946},"end":{"line":13,"column":189,"offset":957}}},{"type":"text","value":" ， ","position":{"start":{"line":13,"column":189,"offset":957},"end":{"line":13,"column":192,"offset":960}}},{"type":"raw","value":"<code class=\"language-text\">nodeGroup</code>","position":{"start":{"line":13,"column":192,"offset":960},"end":{"line":13,"column":203,"offset":971}}},{"type":"text","value":" 层级高于 ","position":{"start":{"line":13,"column":203,"offset":971},"end":{"line":13,"column":209,"offset":977}}},{"type":"raw","value":"<code class=\"language-text\">edgeGroup</code>","position":{"start":{"line":13,"column":209,"offset":977},"end":{"line":13,"column":220,"offset":988}}},{"type":"text","value":" ，三个节点绘制在三条边的上层。下图（右）是（左）图的节点降低透明度后的效果，可以更清晰看到边绘制在节点下方。","position":{"start":{"line":13,"column":220,"offset":988},"end":{"line":13,"column":275,"offset":1043}}},{"type":"raw","value":"<br />","position":{"start":{"line":13,"column":275,"offset":1043},"end":{"line":13,"column":281,"offset":1049}}},{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":13,"column":281,"offset":1049},"end":{"line":13,"column":519,"offset":1287}}},{"type":"element","tagName":"img","properties":{"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"},"children":[],"position":{"start":{"line":13,"column":519,"offset":1287},"end":{"line":13,"column":757,"offset":1525}}}],"position":{"start":{"line":13,"column":1,"offset":769},"end":{"line":13,"column":757,"offset":1525}}},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"（左）节点和边的图形分组 Group 演示。（右）给左图的节点降低了透明度。","position":{"start":{"line":14,"column":3,"offset":1528},"end":{"line":14,"column":41,"offset":1566}}}],"position":{"start":{"line":14,"column":3,"offset":1528},"end":{"line":14,"column":41,"offset":1566}}},{"type":"text","value":"\n"}],"position":{"start":{"line":14,"column":1,"offset":1526},"end":{"line":14,"column":41,"offset":1566}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />","position":{"start":{"line":17,"column":1,"offset":1569},"end":{"line":17,"column":7,"offset":1575}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"何时使用图形分组-group"},"children":[{"type":"element","tagName":"a","properties":{"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"},"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":19,"column":4,"offset":1580},"end":{"line":19,"column":18,"offset":1594}}}],"position":{"start":{"line":19,"column":1,"offset":1577},"end":{"line":19,"column":18,"offset":1594}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-node","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义节点","position":{"start":{"line":20,"column":2,"offset":1596},"end":{"line":20,"column":7,"offset":1601}}}],"position":{"start":{"line":20,"column":1,"offset":1595},"end":{"line":20,"column":49,"offset":1643}}},{"type":"text","value":"、","position":{"start":{"line":20,"column":49,"offset":1643},"end":{"line":20,"column":50,"offset":1644}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义边","position":{"start":{"line":20,"column":51,"offset":1645},"end":{"line":20,"column":55,"offset":1649}}}],"position":{"start":{"line":20,"column":50,"offset":1644},"end":{"line":20,"column":97,"offset":1691}}},{"type":"text","value":"时将会涉及到图形分组 Group 的概念。图形分组 Group 方便了用户对节点或边上元素的组合和管理。","position":{"start":{"line":20,"column":97,"offset":1691},"end":{"line":20,"column":149,"offset":1743}}},{"type":"raw","value":"<br />","position":{"start":{"line":20,"column":149,"offset":1743},"end":{"line":20,"column":155,"offset":1749}}},{"type":"text","value":"例如，如下图中的节点 A 有一个包含节点 A 中所有图形的 group，该 group 中包含了一个 circle 图形和一个文本图形。节点 B 是一个自定义节点，有一个包含节点 B 中所有图形的 group，该 group 包含了 circle 图形、rect 图形、文本图形。","position":{"start":{"line":20,"column":155,"offset":1749},"end":{"line":20,"column":295,"offset":1889}}},{"type":"raw","value":"<br />","position":{"start":{"line":20,"column":295,"offset":1889},"end":{"line":20,"column":301,"offset":1895}}}],"position":{"start":{"line":20,"column":1,"offset":1595},"end":{"line":20,"column":301,"offset":1895}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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'/>","position":{"start":{"line":22,"column":1,"offset":1897},"end":{"line":23,"column":260,"offset":2415}}},{"type":"text","value":"\n"},{"type":"raw","value":"<br />","position":{"start":{"line":25,"column":1,"offset":2417},"end":{"line":25,"column":7,"offset":2423}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"如何使用图形分组-group"},"children":[{"type":"element","tagName":"a","properties":{"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"},"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":27,"column":4,"offset":2428},"end":{"line":27,"column":18,"offset":2442}}}],"position":{"start":{"line":27,"column":1,"offset":2425},"end":{"line":27,"column":18,"offset":2442}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"以下方法将会在","position":{"start":{"line":28,"column":1,"offset":2443},"end":{"line":28,"column":8,"offset":2450}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-node","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义节点","position":{"start":{"line":28,"column":9,"offset":2451},"end":{"line":28,"column":14,"offset":2456}}}],"position":{"start":{"line":28,"column":8,"offset":2450},"end":{"line":28,"column":56,"offset":2498}}},{"type":"text","value":"、","position":{"start":{"line":28,"column":56,"offset":2498},"end":{"line":28,"column":57,"offset":2499}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-edge","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义边","position":{"start":{"line":28,"column":58,"offset":2500},"end":{"line":28,"column":62,"offset":2504}}}],"position":{"start":{"line":28,"column":57,"offset":2499},"end":{"line":28,"column":104,"offset":2546}}},{"type":"text","value":"时用到。","position":{"start":{"line":28,"column":104,"offset":2546},"end":{"line":28,"column":108,"offset":2550}}}],"position":{"start":{"line":28,"column":1,"offset":2443},"end":{"line":28,"column":108,"offset":2550}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"声明实例"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%A3%B0%E6%98%8E%E5%AE%9E%E4%BE%8B","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":30,"column":5,"offset":2556},"end":{"line":30,"column":9,"offset":2560}}}],"position":{"start":{"line":30,"column":1,"offset":2552},"end":{"line":30,"column":9,"offset":2560}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">const group = new Group(cfgs);</code></pre></div>","position":{"start":{"line":31,"column":1,"offset":2561},"end":{"line":33,"column":4,"offset":2599}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"实例方法"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95","aria-label":"实例方法 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"实例方法","position":{"start":{"line":35,"column":5,"offset":2605},"end":{"line":35,"column":9,"offset":2609}}}],"position":{"start":{"line":35,"column":1,"offset":2601},"end":{"line":35,"column":9,"offset":2609}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"addGroup(cfgs)","position":{"start":{"line":37,"column":3,"offset":2613},"end":{"line":37,"column":17,"offset":2627}}}],"position":{"start":{"line":37,"column":1,"offset":2611},"end":{"line":37,"column":17,"offset":2627}}},{"type":"text","value":"\n"}],"position":{"start":{"line":37,"column":1,"offset":2611},"end":{"line":37,"column":17,"offset":2627}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"向分组中添加新的分组。","position":{"start":{"line":39,"column":1,"offset":2629},"end":{"line":39,"column":12,"offset":2640}}}],"position":{"start":{"line":39,"column":1,"offset":2629},"end":{"line":39,"column":12,"offset":2640}}},{"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> 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>","position":{"start":{"line":41,"column":1,"offset":2642},"end":{"line":45,"column":4,"offset":2709}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"addShape(type, cfgs)","position":{"start":{"line":47,"column":3,"offset":2713},"end":{"line":47,"column":23,"offset":2733}}}],"position":{"start":{"line":47,"column":1,"offset":2711},"end":{"line":47,"column":23,"offset":2733}}},{"type":"text","value":"\n"}],"position":{"start":{"line":47,"column":1,"offset":2711},"end":{"line":47,"column":23,"offset":2733}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"向分组中添加新的图形。","position":{"start":{"line":49,"column":1,"offset":2735},"end":{"line":49,"column":12,"offset":2746}}}],"position":{"start":{"line":49,"column":1,"offset":2735},"end":{"line":49,"column":12,"offset":2746}}},{"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> 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>","position":{"start":{"line":51,"column":1,"offset":2748},"end":{"line":57,"column":4,"offset":2842}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"提示：在分组上添加的 ","position":{"start":{"line":60,"column":1,"offset":2845},"end":{"line":60,"column":12,"offset":2856}}},{"type":"raw","value":"<code class=\"language-text\">clip</code>","position":{"start":{"line":60,"column":12,"offset":2856},"end":{"line":60,"column":18,"offset":2862}}},{"type":"text","value":"， ","position":{"start":{"line":60,"column":18,"offset":2862},"end":{"line":60,"column":20,"offset":2864}}},{"type":"raw","value":"<code class=\"language-text\">transform</code>","position":{"start":{"line":60,"column":20,"offset":2864},"end":{"line":60,"column":31,"offset":2875}}},{"type":"text","value":" 等会影响到该分组中的所有图形。","position":{"start":{"line":60,"column":31,"offset":2875},"end":{"line":60,"column":47,"offset":2891}}}],"position":{"start":{"line":60,"column":1,"offset":2845},"end":{"line":60,"column":47,"offset":2891}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":61,"column":1,"offset":2892}}}}