@antv/g6
Version:
graph visualization frame work
1 lines • 21.5 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-0ad71eb40a9042271afa88c40f3f2b3a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#什么是-g6","title":null,"children":[],"data":{"hProperties":{"aria-label":"什么是 g6 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":"什么是 G6","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":10,"offset":10},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":10,"offset":10},"indent":[]},"data":{"id":"什么是-g6","htmlAttributes":{"id":"什么是-g6"},"hProperties":{"id":"什么是-g6"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 是一个前端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。","position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":79,"offset":89},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":11},"end":{"line":3,"column":79,"offset":89},"indent":[]}},{"type":"heading","depth":2,"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":5,"column":4,"offset":94},"end":{"line":5,"column":10,"offset":100},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":91},"end":{"line":5,"column":10,"offset":100},"indent":[]},"data":{"id":"入门教程简介","htmlAttributes":{"id":"入门教程简介"},"hProperties":{"id":"入门教程简介"}}},{"type":"paragraph","children":[{"type":"text","value":"我们在本入门教程中将会完成一个如下图所示简单的图可视化，我们将在后文中称其为 ","position":{"start":{"line":6,"column":1,"offset":101},"end":{"line":6,"column":40,"offset":140},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":6,"column":42,"offset":142},"end":{"line":6,"column":52,"offset":152},"indent":[]}}],"position":{"start":{"line":6,"column":40,"offset":140},"end":{"line":6,"column":54,"offset":154},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":6,"column":54,"offset":154},"end":{"line":6,"column":55,"offset":155},"indent":[]}},{"type":"link","title":null,"url":"https://codepen.io/Yanyan-Wang/pen/mdbYZvZ","children":[{"type":"text","value":"完整代码","position":{"start":{"line":6,"column":56,"offset":156},"end":{"line":6,"column":60,"offset":160},"indent":[]}}],"position":{"start":{"line":6,"column":55,"offset":155},"end":{"line":6,"column":105,"offset":205},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":6,"column":105,"offset":205},"end":{"line":6,"column":106,"offset":206},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":6,"column":106,"offset":206},"end":{"line":6,"column":112,"offset":212},"indent":[]}},{"type":"image","title":null,"url":"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","position":{"start":{"line":6,"column":112,"offset":212},"end":{"line":6,"column":383,"offset":483},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":101},"end":{"line":6,"column":383,"offset":483},"indent":[]}},{"type":"html","value":"<div style=\"text-align: center;\"><b>Tutorial案例</b> 效果图</div>","position":{"start":{"line":8,"column":1,"offset":485},"end":{"line":8,"column":61,"offset":545},"indent":[]}},{"type":"heading","depth":2,"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":11,"column":4,"offset":551},"end":{"line":11,"column":6,"offset":553},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":548},"end":{"line":11,"column":6,"offset":553},"indent":[]},"data":{"id":"前言","htmlAttributes":{"id":"前言"},"hProperties":{"id":"前言"}}},{"type":"paragraph","children":[{"type":"text","value":"我们将会通过本入门教程完成包含图的创建、渲染、元素的配置、布局、交互、动画、工具的最终的 ","position":{"start":{"line":12,"column":1,"offset":554},"end":{"line":12,"column":46,"offset":599},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":12,"column":48,"offset":601},"end":{"line":12,"column":58,"offset":611},"indent":[]}}],"position":{"start":{"line":12,"column":46,"offset":599},"end":{"line":12,"column":60,"offset":613},"indent":[]}},{"type":"text","value":"。在这部分教学中，读者将会学习到 G6 中基础和核心的功能。掌握该入门教程内容后，可以帮助读者初步理解 G6 并为深度理解 G6 打好基础。","position":{"start":{"line":12,"column":60,"offset":613},"end":{"line":12,"column":130,"offset":683},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":554},"end":{"line":12,"column":130,"offset":683},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"该入门教程将会划分为以下几个章节：","position":{"start":{"line":14,"column":1,"offset":685},"end":{"line":14,"column":18,"offset":702},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":685},"end":{"line":14,"column":18,"offset":702},"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":16,"column":3,"offset":706},"end":{"line":16,"column":7,"offset":710},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":706},"end":{"line":16,"column":7,"offset":710},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":704},"end":{"line":16,"column":7,"offset":710},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"创建图","position":{"start":{"line":17,"column":3,"offset":713},"end":{"line":17,"column":6,"offset":716},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":713},"end":{"line":17,"column":6,"offset":716},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":711},"end":{"line":17,"column":6,"offset":716},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"元素及其配置","position":{"start":{"line":18,"column":3,"offset":719},"end":{"line":18,"column":9,"offset":725},"indent":[]}}],"position":{"start":{"line":18,"column":3,"offset":719},"end":{"line":18,"column":9,"offset":725},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":717},"end":{"line":18,"column":9,"offset":725},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"使用图布局 Layout","position":{"start":{"line":19,"column":3,"offset":728},"end":{"line":19,"column":15,"offset":740},"indent":[]}}],"position":{"start":{"line":19,"column":3,"offset":728},"end":{"line":19,"column":15,"offset":740},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":726},"end":{"line":19,"column":15,"offset":740},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"图的交互 Behavior","position":{"start":{"line":20,"column":3,"offset":743},"end":{"line":20,"column":16,"offset":756},"indent":[]}}],"position":{"start":{"line":20,"column":3,"offset":743},"end":{"line":20,"column":16,"offset":756},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":741},"end":{"line":20,"column":16,"offset":756},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"插件 & 工具","position":{"start":{"line":21,"column":3,"offset":759},"end":{"line":21,"column":10,"offset":766},"indent":[]}}],"position":{"start":{"line":21,"column":3,"offset":759},"end":{"line":21,"column":10,"offset":766},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":757},"end":{"line":21,"column":10,"offset":766},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"*动画（选读）","position":{"start":{"line":22,"column":3,"offset":769},"end":{"line":22,"column":10,"offset":776},"indent":[]}}],"position":{"start":{"line":22,"column":3,"offset":769},"end":{"line":22,"column":10,"offset":776},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":767},"end":{"line":22,"column":10,"offset":776},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":704},"end":{"line":22,"column":10,"offset":776},"indent":[1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">提示</code>","position":{"start":{"line":24,"column":1,"offset":778},"end":{"line":24,"column":5,"offset":782},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":24,"column":5,"offset":782},"end":{"line":24,"column":6,"offset":783},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":24,"column":6,"offset":783},"end":{"line":24,"column":12,"offset":789},"indent":[]}},{"type":"text","value":"该入门教程是为希望“边学边做”的读者设计的。如果您更希望从底层概念开始学习 G6，您可以参见：","position":{"start":{"line":24,"column":12,"offset":789},"end":{"line":24,"column":59,"offset":836},"indent":[]}},{"type":"link","title":null,"url":"../middle/keyConcept","children":[{"type":"text","value":"中级教程","position":{"start":{"line":24,"column":60,"offset":837},"end":{"line":24,"column":64,"offset":841},"indent":[]}}],"position":{"start":{"line":24,"column":59,"offset":836},"end":{"line":24,"column":87,"offset":864},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":24,"column":87,"offset":864},"end":{"line":24,"column":88,"offset":865},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":778},"end":{"line":24,"column":88,"offset":865},"indent":[]}},{"type":"heading","depth":2,"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":26,"column":4,"offset":870},"end":{"line":26,"column":8,"offset":874},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":867},"end":{"line":26,"column":8,"offset":874},"indent":[]},"data":{"id":"基础知识","htmlAttributes":{"id":"基础知识"},"hProperties":{"id":"基础知识"}}},{"type":"paragraph","children":[{"type":"text","value":"本教程会从教你使用 G6 去创建一个完整的图可视化应用。在学习之前，我们假设读者对 HTML 和 JavaScript 有所了解，但并不要求对 G6 有任何的基础。如果读者对 G6 的基本内容已经熟知，可以适当跳过部分内容，有针对性地阅读重要的知识点。","position":{"start":{"line":27,"column":1,"offset":875},"end":{"line":27,"column":127,"offset":1001},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":875},"end":{"line":27,"column":127,"offset":1001},"indent":[]}},{"type":"heading","depth":2,"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":29,"column":4,"offset":1006},"end":{"line":29,"column":8,"offset":1010},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":1003},"end":{"line":29,"column":8,"offset":1010},"indent":[]},"data":{"id":"环境准备","htmlAttributes":{"id":"环境准备"},"hProperties":{"id":"环境准备"}}},{"type":"paragraph","children":[{"type":"text","value":"建议使用新版的 Chrome 浏览器作为运行环境，用任意的代码编辑器进行代码的编写即可。本教程默认采用 CDN 的方式直接引入 G6 类库，引入的版本是 3.1.1，此版本很多特性会大大简化我们的代码。如果希望在其他环境尝试本教程的学习，读者可以参考 ","position":{"start":{"line":30,"column":1,"offset":1011},"end":{"line":30,"column":127,"offset":1137},"indent":[]}},{"type":"link","title":null,"url":"../getting-started","children":[{"type":"text","value":"快速上手","position":{"start":{"line":30,"column":128,"offset":1138},"end":{"line":30,"column":132,"offset":1142},"indent":[]}}],"position":{"start":{"line":30,"column":127,"offset":1137},"end":{"line":30,"column":153,"offset":1163},"indent":[]}},{"type":"text","value":" 中的安装配置部分。","position":{"start":{"line":30,"column":153,"offset":1163},"end":{"line":30,"column":163,"offset":1173},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":1011},"end":{"line":30,"column":163,"offset":1173},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"新建 index.html 文件，并添加如下代码：","position":{"start":{"line":32,"column":1,"offset":1175},"end":{"line":32,"column":26,"offset":1200},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":1175},"end":{"line":32,"column":26,"offset":1200},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\"><!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\n <span class=\"token comment\"><!-- 引入 G6 --></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span>Global<span class=\"token punctuation\">.</span>version<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":33,"column":1,"offset":1201},"end":{"line":50,"column":4,"offset":1535},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"使用浏览器打开 index.html 文件，打开控制台，可以看到 G6 的版本号，说明 G6 已成功引入。","position":{"start":{"line":52,"column":1,"offset":1537},"end":{"line":52,"column":54,"offset":1590},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":52,"column":54,"offset":1590},"end":{"line":52,"column":60,"offset":1596},"indent":[]}},{"type":"image","title":null,"url":"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","position":{"start":{"line":52,"column":60,"offset":1596},"end":{"line":52,"column":300,"offset":1836},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":1537},"end":{"line":52,"column":300,"offset":1836},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":53,"column":1,"offset":1837}}}}