@antv/g6

Version:

graph visualization frame work

1 lines • 2.23 MB

JSON

{"componentChunkName":"component---node-modules-antv-gatsby-theme-antv-0-9-49-antv-gatsby-theme-antv-site-templates-example-tsx","path":"/zh/examples/shape/basic","result":{"data":{"site":{"siteMetadata":{"title":"G6","githubUrl":"git@github.com:antvis/g6.git","examples":[{"slug":"tree","icon":"tree","title":{"zh":"树图","en":"Tree Graph"}},{"slug":"net","icon":"net","title":{"zh":"一般图","en":"General Graph"}},{"slug":"graphql","icon":"graphql","title":{"zh":"其他表达形式","en":"Net Charts"}},{"slug":"shape","icon":"shape","title":{"zh":"元素","en":"Shape"}},{"slug":"interaction","icon":"interaction","title":{"zh":"交互","en":"Interaction"}},{"slug":"scatter","icon":"scatter","title":{"zh":"动画","en":"Animation"}},{"slug":"tool","icon":"tool","title":{"zh":"组件","en":"Component"}},{"slug":"case","icon":"case","title":{"zh":"复杂案例","en":"Case"}}],"playground":null},"pathPrefix":null},"allMarkdownRemark":{"edges":[{"node":{"html":"<img src='https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png' width='750' height='250' />\n<a href=\"https://travis-ci.org/antvis/g6\" target=\"_self\" rel=\"nofollow\"><img src=\"https://img.shields.io/travis/antvis/g6.svg\"></a>\n<img src=\"https://img.shields.io/badge/language-javascript-red.svg\">\n<img src=\"https://img.shields.io/badge/license-MIT-000000.svg\">\n<a href=\"https://www.npmjs.com/package/@antv/g6\" target=\"_self\" rel=\"nofollow\"><img src=\"https://img.shields.io/npm/v/@antv/g6.svg\" alt=\"npm package\"></a>\n<a href=\"https://npmjs.org/package/@antv/g6\" target=\"_self\" rel=\"nofollow\"><img src=\"http://img.shields.io/npm/dm/@antv/g6.svg\" alt=\"NPM downloads\"></a>\n<a href=\"http://isitmaintained.com/project/antvis/g6\" title=\"Percentage of issues still open\" target=\"_self\" rel=\"nofollow\"><img src=\"http://isitmaintained.com/badge/open/antvis/g6.svg\" alt=\"Percentage of issues still open\"></a>\n<a href=\"https://github.com/antvis/g6\" target=\"_self\" rel=\"nofollow\">English README</a>\nG6 是一个图可视化框架。它提供了一套图可视化的基础设置，包括渲染、布局、交互、动画、分析、辅助工具等。帮助开发者搭建属于自己的图 图分析 应用或是 图编辑器 应用。详情请见<a href=\"./getting-started\">开发文档</a>。\n<img src=\"https://user-images.githubusercontent.com/6113694/44995293-02858600-afd5-11e8-840c-349e4730d63d.gif\" height=150><img src=\"https://cdn.nlark.com/yuque/0/2018/gif/93506/1535955277773-840190f8-836a-4bd6-875a-b3a18e6cebf1.gif\" height=150><img src=\"https://user-images.githubusercontent.com/6113694/44995332-2ba61680-afd5-11e8-8cab-db0e9d08ceb7.gif\" height=150>\n<img src=\"https://gw.alipayobjects.com/zos/rmsportal/HQxYguinFOMIXrGQOABY.gif\" height=150><img src=\"https://gw.alipayobjects.com/zos/rmsportal/nAugyFgrbrUWPmDIDiQm.gif\" height=150><img src=\"https://cdn.nlark.com/yuque/0/2019/gif/174835/1552990627466-92a4ce23-79b2-4930-ab05-6478b56ce880.gif\" height=150>\n<h2 id=\"安装\"><a href=\"#%E5%AE%89%E8%A3%85\" 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<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ npm install @antv/g6</code></pre></div>\n<h2 id=\"使用\"><a href=\"#%E4%BD%BF%E7%94%A8\" 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<img src=\"https://gw.alipayobjects.com/zos/rmsportal/qSUOQUhnRrHCLvEjhZGP.png\" />\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">import G6 from '@antv/g6';\n\nconst data = {\n nodes: [{\n id: 'node1',\n x: 100,\n y: 200\n },{\n id: 'node2',\n x: 300,\n y: 200\n }],\n edges: [{\n target: 'node2',\n source: 'node1'\n }]\n};\nconst graph = new G6.Graph({\n container: 'mountNode',\n width: 500,\n height: 500,\n defaultNode: {\n shape: 'circle',\n style: {\n fill: '#40a9ff',\n stroke: '#096dd9'\n }\n },\n nodeStateStyles: {\n hover: {\n lineWidth: 3\n },\n select: {\n lineWidth: 5\n }\n }\n});\ngraph.data(data);\ngraph.render();</code></pre></div>\n<h2 id=\"开发\"><a href=\"#%E5%BC%80%E5%8F%91\" 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<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ npm install\n\n# run test case\n$ npm run test-live\n\n# build watching file changes and run demos\n$ npm run dev</code></pre></div>\n<h2 id=\"如何贡献\"><a href=\"#%E5%A6%82%E4%BD%95%E8%B4%A1%E7%8C%AE\" 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请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 <a href=\"https://github.com/antvis/g6/issues\" target=\"_self\" rel=\"nofollow\">issues</a> 描述 bug 或建议。\n成为一个贡献者前请阅读 <a href=\"https://github.com/antvis/g6/blob/master/CONTRIBUTING.zh-CN.md\" target=\"_self\" rel=\"nofollow\">代码贡献规范</a>.\n<h2 id=\"license\"><a href=\"#license\" aria-label=\"license 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>License</h2>\n<a href=\"https://github.com/antvis/g6/blob/master/LICENSE\" target=\"_self\" rel=\"nofollow\">MIT license</a>.","fields":{"slug":"/zh/docs/manual/introduction"},"frontmatter":{"title":"简介","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/introduction.zh.md"}}},{"node":{"html":"<h2 id=\"什么是-g6\"><a href=\"#%E4%BB%80%E4%B9%88%E6%98%AF-g6\" aria-label=\"什么是 g6 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>什么是 G6</h2>\nG6 是一个前端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。\n<h2 id=\"入门教程简介\"><a href=\"#%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%E7%AE%80%E4%BB%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>入门教程简介</h2>\n我们在本入门教程中将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 Tutorial案例，<a href=\"https://codepen.io/Yanyan-Wang/pen/mdbYZvZ\" target=\"_self\" rel=\"nofollow\">完整代码</a>。 <img src=\"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834152244-a01c6e0e-4125-418c-87e3-27298c036a53.gif##align=left&display=inline&height=297&name=tutorial-demo-final.gif&originHeight=687&originWidth=932&search=&size=6347382&status=done&width=403\" alt=\"tutorial-demo-final.gif\">\n<div style=\"text-align: center;\">Tutorial案例 效果图</div>\n<h2 id=\"前言\"><a href=\"#%E5%89%8D%E8%A8%80\" 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我们将会通过本入门教程完成包含图的创建、渲染、元素的配置、布局、交互、动画、工具的最终的 Tutorial案例。在这部分教学中，读者将会学习到 G6 中基础和核心的功能。掌握该入门教程内容后，可以帮助读者初步理解 G6 并为深度理解 G6 打好基础。\n该入门教程将会划分为以下几个章节：\n<ul>\n<li>快速上手</li>\n<li>创建图</li>\n<li>元素及其配置</li>\n<li>使用图布局 Layout</li>\n<li>图的交互 Behavior</li>\n<li>插件 & 工具</li>\n<li>*动画（选读）</li>\n</ul>\n<code class=\"language-text\">提示</code> 该入门教程是为希望“边学边做”的读者设计的。如果您更希望从底层概念开始学习 G6，您可以参见：<a href=\"../middle/keyConcept\">中级教程</a>。\n<h2 id=\"基础知识\"><a href=\"#%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86\" 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本教程会从教你使用 G6 去创建一个完整的图可视化应用。在学习之前，我们假设读者对 HTML 和 JavaScript 有所了解，但并不要求对 G6 有任何的基础。如果读者对 G6 的基本内容已经熟知，可以适当跳过部分内容，有针对性地阅读重要的知识点。\n<h2 id=\"环境准备\"><a href=\"#%E7%8E%AF%E5%A2%83%E5%87%86%E5%A4%87\" 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建议使用新版的 Chrome 浏览器作为运行环境，用任意的代码编辑器进行代码的编写即可。本教程默认采用 CDN 的方式直接引入 G6 类库，引入的版本是 3.1.1，此版本很多特性会大大简化我们的代码。如果希望在其他环境尝试本教程的学习，读者可以参考 <a href=\"../getting-started\">快速上手</a> 中的安装配置部分。\n新建 index.html 文件，并添加如下代码：\n<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>Tutorial Demo</title>\n </head>\n <body>\n \n <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js\"></script>\n\n <script>\n console.log(G6.Global.version);\n </script>\n </body>\n</html></code></pre></div>\n使用浏览器打开 index.html 文件，打开控制台，可以看到 G6 的版本号，说明 G6 已成功引入。 <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1571051319914-12debb96-aa17-4fc5-a4ab-46f48c788cf7.png#align=left&display=inline&height=214&name=image.png&originHeight=214&originWidth=263&search=&size=13965&status=done&width=263\" alt=\"image.png\">","fields":{"slug":"/zh/docs/manual/tutorial/preface"},"frontmatter":{"title":"前言","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/tutorial/preface.md"}}},{"node":{"html":"<h2 id=\"图形-shape\"><a href=\"#%E5%9B%BE%E5%BD%A2-shape\" aria-label=\"图形 shape 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>图形 Shape</h2>\nShape 指 G6 中的图形、形状，它可以是圆形、矩形、路径等。它一般与 G6 中的节点、边相关。G6 中的每一种节点或边由一个或多个 Shape 组成。\n例如下图（左）的节点包含了一个圆形图形；下图（中）的节点含有有一个圆形和一个文本图形；下图（右）的节点中含有 5 个圆形（蓝绿色的圆和上下左右四个锚点）、一个文本图形。但每种节点和边都会有自己的唯一关键图形 keyShape，下图中三个节点的 keyShape 都是蓝绿色的圆，keyShape 主要用于交互检测、样式随<a href=\"https://www.yuque.com/antv/g6/fqnn9w\" target=\"_self\" rel=\"nofollow\">状态</a>自动更新等，见 <a href=\"#UNCAz\">keyShape</a>。 <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570860282365-a580467a-9843-4aa5-a016-d73dff38fc0a.png#align=left&display=inline&height=68&name=image.png&originHeight=136&originWidth=138&search=&size=14236&status=done&width=69\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570860291602-5729dfa6-4c25-4547-82f8-2d388422df67.png#align=left&display=inline&height=85&name=image.png&originHeight=170&originWidth=150&search=&size=16796&status=done&width=75\" alt=\"image.png\"> <img src=\"https://cdn.nlark.com/yuque/0/2019/png/156681/1570859851766-0358416c-65d1-4637-93d1-e5cf12017bc8.png#align=left&display=inline&height=94&name=image.png&originHeight=188&originWidth=196&search=&size=24941&status=done&width=98\" alt=\"image.png\">\n<blockquote>\n（左）只含有一个圆形图形的节点，keyShape 是该圆形。（中）含有圆形和文本图形的节点，keyShape 是圆形。（右）含有主要圆形、文本、上下左右四个小圆形的节点，keyShape 是圆形。\n</blockquote>\nG6 使用不同的 shape 及组合，设计了多种内置的节点和边。G6 内置节点的有 'circle'， 'rect'，'ellipse'，...（详见 <a href=\"https://www.yuque.com/antv/g6/internal-node\" target=\"_self\" rel=\"nofollow\">内置节点</a>）；内置边的有 'line'，'polyline'，'cubic'，...（详见 <a href=\"https://www.yuque.com/antv/g6/internal-edge\" target=\"_self\" rel=\"nofollow\">内置边</a>）。\n除了使用内置的节点和边外，G6 还允许用户通过自己搭配和组合 Shape 进行节点和边的自定义，详见 <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>。\n<h2 id=\"keyshape\"><a href=\"#keyshape\" aria-label=\"keyshape 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>KeyShape</h2>\n如上所述，每一种节点和边都有一个唯一的关键图形 keyShape。keyShape 是在节点的 draw 方法中返回的图形对象，用于确定节点的包围盒（Bounding Box） —— bbox（x, y, width, height) ，从而计算相关边的连入点（与相关边的交点）。若 keyShape 不同，节点与边的交点计算结果不同。 \n<h3 id=\"示例\"><a href=\"#%E7%A4%BA%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本例中的一个节点由一个 rect 图形和一个带灰色描边、填充透明的 circle 图形构成。\n<ul>\n<li>当节点的 keyShape 为 circle 时：</li>\n</ul>\n<img src=\"https://cdn.nlark.com/yuque/0/2019/png/244306/1561033286841-e52f2489-4c31-4235-9d3c-0dfcc95ff4c6.png#align=left&display=inline&height=145&name=%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-13%20%E4%B8%8A%E5%8D%8811.31.07.png&originHeight=166&originWidth=392&search=&size=8734&status=done&width=342\" alt=\"2019-06-13.07.png\">\n<ul>\n<li>当节点的 keyShape 为 rect 时：</li>\n</ul>\n<img src=\"https://cdn.nlark.com/yuque/0/2019/png/244306/1561033286856-823a0f11-a768-456f-b510-d823799d1bfe.png#align=left&display=inline&height=150&name=%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202019-06-13%20%E4%B8%8A%E5%8D%8811.31.56.png&originHeight=180&originWidth=432&search=&size=8968&status=done&width=359\" alt=\"2019-06-13.png\">\n<h2 id=\"shape-的生命周期\"><a href=\"#shape-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F\" aria-label=\"shape 的生命周期 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>Shape 的生命周期</h2>\n<blockquote>\n当用户需要<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>时，需要了解 Shape 的生命周期。使用内置节点和边则可以跳过这一部分内容。\n</blockquote>\n从整体来看，Shape 的生命周期分为：\n<ul>\n<li>初始化渲染；</li>\n<li>更新；</li>\n<li>操作；</li>\n<li>销毁。</li>\n</ul>\nShape 作为 Graph 上的核心元素，这几个阶段都需要考虑，但是销毁可以交给 Graph 来处理，所以在定义 Shape 时不需要考虑，仅需要考虑三个阶段即可：\n<ul>\n<li>绘制：从无到有的绘制 Shape 及文本；</li>\n<li>更新：数据发生改变导致 Shape 及文本发生变化；</li>\n<li>操作：给 Shape 添加状态，如：selected，active 等。</li>\n</ul>\n所以我们在设计自定义节点和边时，定义了三个方法，若需要自定义节点和边，需要有选择性地复写它们：\n<ul>\n<li><code class=\"language-text\">draw(cfg, group)</code>: 绘制，提供了绘制的配置项（数据定义时透传过来）和图形容器；</li>\n<li><code class=\"language-text\">update(cfg, n)</code>: 更新，更新时的配置项（更新的字段和原始字段的合并）和节点对象；</li>\n<li><code class=\"language-text\">setState(name, value, item)</code>: 设置节点状态。</li>\n</ul>\n关于自定义Shape更多的方法请<a href=\"https://www.yuque.com/antv/g6/shape-api\" target=\"_self\" rel=\"nofollow\">参考 Shape API 文档</a>。\n<h2 id=\"anchorpoint\"><a href=\"#anchorpoint\" aria-label=\"anchorpoint 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>anchorPoint</h2>\n节点的连接点 anchorPoint 指的是边连入节点的相对位置，即节点与其相关边的交点位置。anchorPoints 是一个二维数组，每一项表示一个连接点的位置，在一个<a href=\"https://www.yuque.com/antv/g6/shape-crycle\" target=\"_self\" rel=\"nofollow\">图形 shape</a> 中，连接点的位置如下图所示，x 和 y 方向上范围都是 [0, 1]： \n<img src='https://cdn.nlark.com/yuque/0/2019/png/156681/1571036680989-45a97f57-c247-4408-8b38-37c1e0d6c8c7.png#align=left&display=inline&height=190&name=image.png&originHeight=654&originWidth=1364&search=&size=204253&status=done&width=396' width='600' height='300' />\n节点中有了 anchorPoints 之后，相关边可以分别选择连入起始点、结束点的哪一个 anchorPoint。当需要在节点之间连多条线时，这种机制能够使边的连入更美观。\n边可以通过指定 <code class=\"language-text\">sourceAnchor</code> 和 <code class=\"language-text\">targetAnchor</code> 分别选择起始点、结束点的 anchorPoint。<code class=\"language-text\">sourceAnchor</code> 和 <code class=\"language-text\">targetAnchor</code> 取的值是相对应节点上 anchorPoints 数组的索引值。\n下面数据演示了如何在节点上配置连接点、在边上指定连接点：\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">const data = {\n nodes: [\n {\n id: 'node1',\n label: 'node1',\n x: 100,\n y: 200,\n // 该节点可选的连接点集合，该点有两个可选的连接点\n anchorPoints: [\n [0, 1],\n [0.5, 1],\n ],\n shape: 'rect',\n },\n {\n id: 'node2',\n label: 'node2',\n x: 300,\n y: 400,\n // 该节点可选的连接点集合，该点有两个可选的连接点\n anchorPoints: [\n [0.5, 0],\n [1, 0.5],\n ],\n shape: 'rect',\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n // 该边连入 source 点的第 0 个 anchorPoint，\n sourceAnchor: 0,\n // 该边连入 target 点的第 0 个 anchorPoint，\n targetAnchor: 0,\n style: {\n endArrow: true,\n },\n },\n {\n source: 'node2',\n target: 'node1',\n // 该边连入 source 点的第 1 个 anchorPoint，\n sourceAnchor: 1,\n // 该边连入 source 点的第 1 个 anchorPoint，\n targetAnchor: 1,\n style: {\n endArrow: true,\n },\n },\n ],\n};\n</code></pre></div>","fields":{"slug":"/zh/docs/manual/middle/keyConcept"},"frontmatter":{"title":"G6 中的关键概念","order":0,"icon":null},"parent":{"__typename":"File","relativePath":"manual/middle/keyConcept.zh.md"}}},{"node":{"html":"<h3 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>通用属性</h3>\n属性\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>fill</td>\n<td>设置用于填充绘画的颜色、渐变或模式</td>\n<td>对应canvas属性<code class=\"language-text\">fillStyle</code></td>\n</tr>\n<tr>\n<td>stroke</td>\n<td>设置用于笔触的颜色、渐变或模式</td>\n<td>对应canvas属性<code class=\"language-text\">strokeStyle</code></td>\n</tr>\n<tr>\n<td>shadowColor</td>\n<td>设置用于阴影的颜色</td>\n<td></td>\n</tr>\n<tr>\n<td>shadowBlur</td>\n<td>设置用于阴影的模糊级别</td>\n<td>数值越大，越模糊</td>\n</tr>\n<tr>\n<td>shadowOffsetX</td>\n<td>设置阴影距形状的水平距离</td>\n<td></td>\n</tr>\n<tr>\n<td>shadowOffsetY</td>\n<td>设置阴影距形状的垂直距离</td>\n<td></td>\n</tr>\n<tr>\n<td>opacity</td>\n<td>设置绘图的当前 alpha 或透明值</td>\n<td>对应canvas属性<code class=\"language-text\">globalAlpha</code></td>\n</tr>\n</tbody>\n</table>\n用法\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group.addShape('rect', {\n attrs: {\n fill: 'red',\n shadowOffsetX: 10,\n shadowOffsetY: 10,\n shadowColor: 'blue',\n shadowBlur: 10,\n opacity: 0.8,\n },\n});\n</code></pre></div>\n<h3 id=\"圆图形-circle\"><a href=\"#%E5%9C%86%E5%9B%BE%E5%BD%A2-circle\" aria-label=\"圆图形 circle 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>圆图形 Circle</h3>\n属性\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>圆心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>圆心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>r</td>\n<td>圆的半径</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n用法\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group.addShape('circle', {\n attrs: {\n x: 100,\n y: 100,\n r: 50,\n fill: 'blue',\n },\n});\n</code></pre></div>\n<h3 id=\"椭圆图形-ellipse\"><a href=\"#%E6%A4%AD%E5%9C%86%E5%9B%BE%E5%BD%A2-ellipse\" aria-label=\"椭圆图形 ellipse 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>椭圆图形 Ellipse</h3>\n属性\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>圆心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>圆心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>rx</td>\n<td>水平半径</td>\n<td></td>\n</tr>\n<tr>\n<td>ry</td>\n<td>垂直半径</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n用法\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group.addShape('ellipse', {\n attrs: {\n x: 100,\n y: 100,\n rx: 50,\n ry: 50,\n fill: 'blue',\n },\n});\n</code></pre></div>\n<h3 id=\"扇形图形-fan\"><a href=\"#%E6%89%87%E5%BD%A2%E5%9B%BE%E5%BD%A2-fan\" aria-label=\"扇形图形 fan 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>扇形图形 Fan</h3>\n属性\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>扇形圆心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>扇形圆心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>rs</td>\n<td>水平半径</td>\n<td></td>\n</tr>\n<tr>\n<td>re</td>\n<td>垂直半径</td>\n<td></td>\n</tr>\n<tr>\n<td>startAngle</td>\n<td>起点弧度</td>\n<td>弧度是弧度，即使用Math.PI表示</td>\n</tr>\n<tr>\n<td>endAngle</td>\n<td>终点弧度</td>\n<td></td>\n</tr>\n<tr>\n<td>clockwise</td>\n<td>为<code class=\"language-text\">true</code>时顺时针渲染，为<code class=\"language-text\">false</code>时逆时针渲染</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n用法\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group.addShape('fan', {\n attrs: {\n x: 50,\n y: 50,\n re: 40,\n rs: 30,\n startAngle: (1 / 2) * Math.PI,\n endAngle: Math.PI,\n clockwise: false,\n fill: '#b7eb8f',\n },\n});\n</code></pre></div>\n<h3 id=\"图片图形-image\"><a href=\"#%E5%9B%BE%E7%89%87%E5%9B%BE%E5%BD%A2-image\" aria-label=\"图片图形 image 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>图片图形 Image</h3>\n属性\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>图片左上角的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>图片左上角的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>width</td>\n<td>图片宽度</td>\n<td></td>\n</tr>\n<tr>\n<td>height</td>\n<td>图片高度</td>\n<td></td>\n</tr>\n<tr>\n<td>img</td>\n<td>图片源</td>\n<td>G6支持多种格式的图片： - url - ImageData - Image - canvas </td>\n</tr>\n</tbody>\n</table>\n用法\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">group.addShape('image', {\n attrs: {\n x: 0,\n y: 0,\n img:\n 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',\n },\n});\n</code></pre></div>\n<h3 id=\"标记图形-marker\"><a href=\"#%E6%A0%87%E8%AE%B0%E5%9B%BE%E5%BD%A2-marker\" aria-label=\"标记图形 marker 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>标记图形 Marker</h3>\n属性\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>含义</th>\n<th>备注</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>中心的 x 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>y</td>\n<td>中心的 y 坐标</td>\n<td></td>\n</tr>\n<tr>\n<td>r</td>\n<td>形状半径</td>\n<td></td>\n</tr>\n<tr