@antv/g6
Version:
graph visualization frame work
1 lines • 49.5 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-fde852edd4249c7c6987617519f8bb59-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"本章以添加节点及在两个节点之间连线为例进行介绍 G6 中的交互。在阅读本章之前，需要先熟悉以下内容：","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":51,"offset":51},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":51,"offset":51},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/self-behavior","children":[{"type":"text","value":"自定义交互行为 Behavior","position":{"start":{"line":4,"column":4,"offset":56},"end":{"line":4,"column":20,"offset":72},"indent":[]}}],"position":{"start":{"line":4,"column":3,"offset":55},"end":{"line":4,"column":66,"offset":118},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"；","position":{"start":{"line":4,"column":66,"offset":118},"end":{"line":4,"column":67,"offset":119},"indent":[]}}],"position":{"start":{"line":4,"column":3,"offset":55},"end":{"line":4,"column":67,"offset":119},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":53},"end":{"line":4,"column":67,"offset":119},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/g6-mode","children":[{"type":"text","value":"交互模式 Mode","position":{"start":{"line":5,"column":4,"offset":123},"end":{"line":5,"column":13,"offset":132},"indent":[]}}],"position":{"start":{"line":5,"column":3,"offset":122},"end":{"line":5,"column":53,"offset":172},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":5,"column":53,"offset":172},"end":{"line":5,"column":54,"offset":173},"indent":[]}}],"position":{"start":{"line":5,"column":3,"offset":122},"end":{"line":5,"column":54,"offset":173},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":120},"end":{"line":5,"column":54,"offset":173},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":53},"end":{"line":5,"column":54,"offset":173},"indent":[1]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1571207486613-09820b48-f565-40c4-b8f8-6238b063edb2.gif#align=left&display=inline&height=268&name=interact-add.gif&originHeight=427&originWidth=411&search=&size=202897&status=done&width=258","alt":"interact-add.gif","position":{"start":{"line":7,"column":1,"offset":175},"end":{"line":7,"column":256,"offset":430},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":7,"column":256,"offset":430},"end":{"line":7,"column":262,"offset":436},"indent":[]}},{"type":"text","value":"上图是本文要实现的最终效果。完整 demo 代码参见：","position":{"start":{"line":7,"column":262,"offset":436},"end":{"line":7,"column":289,"offset":463},"indent":[]}},{"type":"link","title":null,"url":"https://codepen.io/Yanyan-Wang/pen/qBBNaye","children":[{"type":"text","value":"动态添加元素","position":{"start":{"line":7,"column":290,"offset":464},"end":{"line":7,"column":296,"offset":470},"indent":[]}}],"position":{"start":{"line":7,"column":289,"offset":463},"end":{"line":7,"column":341,"offset":515},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":7,"column":341,"offset":515},"end":{"line":7,"column":342,"offset":516},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":7,"column":342,"offset":516},"end":{"line":7,"column":348,"offset":522},"indent":[]}},{"type":"text","value":"方下拉菜单中有三个选项，用于切换交互模式 mode：","position":{"start":{"line":7,"column":348,"offset":522},"end":{"line":7,"column":374,"offset":548},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":175},"end":{"line":7,"column":374,"offset":548},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"选择“默认”按钮时，切换到 default 交互模式：拖拽节点时节点跟随鼠标移动；点击节点时选中该节点；","position":{"start":{"line":9,"column":3,"offset":552},"end":{"line":9,"column":55,"offset":604},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":552},"end":{"line":9,"column":55,"offset":604},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":550},"end":{"line":9,"column":55,"offset":604},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"选择“添加节点”按钮时，切换到 addNode 交互模式：点击空白区域在点击处增加一个节点；点击节点时选中该节点；","position":{"start":{"line":10,"column":3,"offset":607},"end":{"line":10,"column":60,"offset":664},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":607},"end":{"line":10,"column":60,"offset":664},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":605},"end":{"line":10,"column":60,"offset":664},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"选择“添加边”按钮时，切换到 addEdge 交互模式：依次点击两个节点将会在这两个节点之间添加一条边。","position":{"start":{"line":11,"column":3,"offset":667},"end":{"line":11,"column":55,"offset":719},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":667},"end":{"line":11,"column":55,"offset":719},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":665},"end":{"line":11,"column":55,"offset":719},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":550},"end":{"line":11,"column":55,"offset":719},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"使用多个 mode 的原因","position":{"start":{"line":13,"column":3,"offset":723},"end":{"line":13,"column":16,"offset":736},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":721},"end":{"line":13,"column":18,"offset":738},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":13,"column":18,"offset":738},"end":{"line":13,"column":24,"offset":744},"indent":[]}},{"type":"text","value":" 相同的鼠标操作，在不同场景下有不同的含义。例如：","position":{"start":{"line":13,"column":24,"offset":744},"end":{"line":13,"column":50,"offset":770},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":721},"end":{"line":13,"column":50,"offset":770},"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":15,"column":3,"offset":774},"end":{"line":15,"column":63,"offset":834},"indent":[]}}],"position":{"start":{"line":15,"column":3,"offset":774},"end":{"line":15,"column":63,"offset":834},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":772},"end":{"line":15,"column":63,"offset":834},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"点击选中、点击两个节点添加边都涉及到了鼠标在节点上的点击操作。","position":{"start":{"line":16,"column":3,"offset":837},"end":{"line":16,"column":34,"offset":868},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":837},"end":{"line":16,"column":34,"offset":868},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":835},"end":{"line":16,"column":34,"offset":868},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":772},"end":{"line":16,"column":34,"offset":868},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"为了区分这些操作的含义，我们使用交互模式 mode 划分不同的场景。","position":{"start":{"line":18,"column":1,"offset":870},"end":{"line":18,"column":35,"offset":904},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":18,"column":35,"offset":904},"end":{"line":18,"column":41,"offset":910},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":870},"end":{"line":18,"column":41,"offset":910},"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":21,"column":4,"offset":916},"end":{"line":21,"column":8,"offset":920},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":913},"end":{"line":21,"column":8,"offset":920},"indent":[]},"data":{"id":"前提代码","htmlAttributes":{"id":"前提代码"},"hProperties":{"id":"前提代码"}}},{"type":"paragraph","children":[{"type":"text","value":"下面 HTML 代码是本文的基础代码，后续功能将在这份代码中增量添加。下面代码定义了左上方的下拉菜单，以及后面将会用到图上的初始数据 ","position":{"start":{"line":22,"column":1,"offset":921},"end":{"line":22,"column":68,"offset":988},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">data</code>","position":{"start":{"line":22,"column":68,"offset":988},"end":{"line":22,"column":74,"offset":994},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":22,"column":74,"offset":994},"end":{"line":22,"column":75,"offset":995},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":921},"end":{"line":22,"column":75,"offset":995},"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>Interactively Add<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\"><!-- 左上方的下拉菜单 --></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>select</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>selector<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>option</span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>default<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>默认<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>option</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>option</span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>addNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>添加节点<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>option</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>option</span> <span class=\"token attr-name\">value</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>addEdge<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>添加边<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>option</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>select</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></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.0/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 <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 <span class=\"token comment\">// 初始数据</span>\n \t<span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node3'</span><span class=\"token punctuation\">,</span>\n x<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span><span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> <span class=\"token number\">300</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token string\">'edge1'</span><span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">]</span>\n <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":23,"column":1,"offset":996},"end":{"line":64,"column":4,"offset":1794},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"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":67,"column":4,"offset":1800},"end":{"line":67,"column":10,"offset":1806},"indent":[]}}],"position":{"start":{"line":67,"column":1,"offset":1797},"end":{"line":67,"column":10,"offset":1806},"indent":[]},"data":{"id":"配置交互模式","htmlAttributes":{"id":"配置交互模式"},"hProperties":{"id":"配置交互模式"}}},{"type":"paragraph","children":[{"type":"text","value":"下面代码实例化了图，并配置了交互模式的集合 ","position":{"start":{"line":68,"column":1,"offset":1807},"end":{"line":68,"column":23,"offset":1829},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":68,"column":23,"offset":1829},"end":{"line":68,"column":30,"offset":1836},"indent":[]}},{"type":"text","value":"，其中包括 ","position":{"start":{"line":68,"column":30,"offset":1836},"end":{"line":68,"column":36,"offset":1842},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">default</code>","position":{"start":{"line":68,"column":36,"offset":1842},"end":{"line":68,"column":45,"offset":1851},"indent":[]}},{"type":"text","value":" 默认交互模式、","position":{"start":{"line":68,"column":45,"offset":1851},"end":{"line":68,"column":53,"offset":1859},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">addNode</code>","position":{"start":{"line":68,"column":53,"offset":1859},"end":{"line":68,"column":62,"offset":1868},"indent":[]}},{"type":"text","value":" 增加节点交互模式、","position":{"start":{"line":68,"column":62,"offset":1868},"end":{"line":68,"column":72,"offset":1878},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">addEdge</code>","position":{"start":{"line":68,"column":72,"offset":1878},"end":{"line":68,"column":81,"offset":1887},"indent":[]}},{"type":"text","value":" 增加边交互模式。每种交互模式中都包含了各自的交互行为，其中 ","position":{"start":{"line":68,"column":81,"offset":1887},"end":{"line":68,"column":112,"offset":1918},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'drag-node'</code>","position":{"start":{"line":68,"column":112,"offset":1918},"end":{"line":68,"column":125,"offset":1931},"indent":[]}},{"type":"text","value":"（拖拽节点） 和 ","position":{"start":{"line":68,"column":125,"offset":1931},"end":{"line":68,"column":134,"offset":1940},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click-select'</code>","position":{"start":{"line":68,"column":134,"offset":1940},"end":{"line":68,"column":150,"offset":1956},"indent":[]}},{"type":"text","value":"（点击选中） 是 G6 内置的交互行为，","position":{"start":{"line":68,"column":150,"offset":1956},"end":{"line":68,"column":170,"offset":1976},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click-add-node'</code>","position":{"start":{"line":68,"column":170,"offset":1976},"end":{"line":68,"column":188,"offset":1994},"indent":[]}},{"type":"text","value":"（点击空白画布添加节点） 和 ","position":{"start":{"line":68,"column":188,"offset":1994},"end":{"line":68,"column":203,"offset":2009},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click-add-edge'</code>","position":{"start":{"line":68,"column":203,"offset":2009},"end":{"line":68,"column":221,"offset":2027},"indent":[]}},{"type":"text","value":"（点击两个节点添加边） 需要我们在后面进行自定义。","position":{"start":{"line":68,"column":221,"offset":2027},"end":{"line":68,"column":246,"offset":2052},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":1807},"end":{"line":68,"column":246,"offset":2052},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// const data = ...</span>\n<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 <span class=\"token comment\">// 交互模式集合</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 默认交互模式</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'drag-node'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 增加节点交互模式</span>\n addNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'click-add-node'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 增加边交互模式</span>\n addEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'click-add-edge'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 监听左上角下拉菜单的变化，根据其变化切换图的交互模式</span>\ndocument<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'selector'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'change'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> value <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">.</span>value<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 切换交互模式</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setMode</span><span class=\"token punctuation\">(</span>value<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":69,"column":1,"offset":2053},"end":{"line":95,"column":4,"offset":2600},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"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":98,"column":6,"offset":2608},"end":{"line":98,"column":10,"offset":2612},"indent":[]}}],"position":{"start":{"line":98,"column":1,"offset":2603},"end":{"line":98,"column":10,"offset":2612},"indent":[]},"data":{"id":"添加节点","htmlAttributes":{"id":"添加节点"},"hProperties":{"id":"添加节点"}}},{"type":"paragraph","children":[{"type":"text","value":"在上面的实例中，当选中添加节点按钮时，会切换到添加节点的 Mode 上。实现在点击空白画布时，在点击位置添加节点的方式是通过 ","position":{"start":{"line":99,"column":1,"offset":2613},"end":{"line":99,"column":64,"offset":2676},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">G6.registerBehavior</code>","position":{"start":{"line":99,"column":64,"offset":2676},"end":{"line":99,"column":85,"offset":2697},"indent":[]}},{"type":"text","value":" 自定义名为 ","position":{"start":{"line":99,"column":85,"offset":2697},"end":{"line":99,"column":92,"offset":2704},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click-add-node'</code>","position":{"start":{"line":99,"column":92,"offset":2704},"end":{"line":99,"column":110,"offset":2722},"indent":[]}},{"type":"text","value":"（名字可以自由设定） 的 Behavior 实现的 。","position":{"start":{"line":99,"column":110,"offset":2722},"end":{"line":99,"column":137,"offset":2749},"indent":[]}}],"position":{"start":{"line":99,"column":1,"offset":2613},"end":{"line":99,"column":137,"offset":2749},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 封装点击添加边的交互</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerBehavior</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click-add-node'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 设定该自定义行为需要监听的事件及其响应函数</span>\n <span class=\"token function\">getEvents</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 监听的事件为 cnavas:click，响应函数时 onClick</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">'canvas:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onClick'</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>\n <span class=\"token comment\">// 点击事件</span>\n <span class=\"token function\">onClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 在图上新增一个节点</span>\n <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">addItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n x<span class=\"token punctuation\">:</span> ev<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span>\n y<span class=\"token punctuation\">:</span> ev<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">,</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span>Util<span class=\"token punctuation\">.</span><span class=\"token function\">uniqueId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 生成唯一的 id</span>\n <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>","position":{"start":{"line":100,"column":1,"offset":2750},"end":{"line":121,"column":4,"offset":3161},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":4,"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":123,"column":6,"offset":3168},"end":{"line":123,"column":9,"offset":3171},"indent":[]}}],"position":{"start":{"line":123,"column":1,"offset":3163},"end":{"line":123,"column":9,"offset":3171},"indent":[]},"data":{"id":"添加边","htmlAttributes":{"id":"添加边"},"hProperties":{"id":"添加边"}}},{"type":"paragraph","children":[{"type":"text","value":"在上面的案例中，当需要在两个节点之间连线时，要先切换到添加边的 Mode 上。下面代码自定义了名为 ","position":{"start":{"line":124,"column":1,"offset":3172},"end":{"line":124,"column":51,"offset":3222},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click-add-edge'</code>","position":{"start":{"line":124,"column":51,"offset":3222},"end":{"line":124,"column":69,"offset":3240},"indent":[]}},{"type":"text","value":"（名字可以自由设定）的 Behavior 实现两个节点之间连线。","position":{"start":{"line":124,"column":69,"offset":3240},"end":{"line":124,"column":101,"offset":3272},"indent":[]}}],"position":{"start":{"line":124,"column":1,"offset":3172},"end":{"line":124,"column":101,"offset":3272},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 封装点击添加边的交互</span>\n<span class=\"token constant\">G6</span><span class=\"token punctuation\">.</span><span class=\"token function\">registerBehavior</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click-add-edge'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 设定该自定义行为需要监听的事件及其响应函数</span>\n <span class=\"token function\">getEvents</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">'node:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onClick'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 监听事件 node:click，响应函数时 onClick</span>\n mousemove<span class=\"token punctuation\">:</span> <span class=\"token string\">'onMousemove'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 监听事件 mousemove，响应函数时 onMousemove</span>\n <span class=\"token string\">'edge:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onEdgeClick'</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// 监听事件 edge:click，响应函数时 onEdgeClick</span>\n <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 comment\">// getEvents 中定义的 'node:click' 的响应函数</span>\n <span class=\"token function\">onClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 鼠标当前点击的节点的位置</span>\n <span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> ev<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> ev<span class=\"token punctuation\">.</span>y <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> model <span class=\"token operator\">=</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">getModel</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>addingEdge <span class=\"token operator\">&&</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">updateItem</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n target<span class=\"token punctuation\">:</span> model<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>addingEdge <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 在图上新增一条边，结束点是鼠标当前点击的节点的位置</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">addItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n source<span class=\"token punctuation\">:</span> model<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span>\n target<span class=\"token punctuation\">:</span> point<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>addingEdge <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// getEvents 中定义的 mousemove 的响应函数</span>\n <span class=\"token function\">onMousemove</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 鼠标的当前位置</span>\n <span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> ev<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> ev<span class=\"token punctuation\">.</span>y <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>addingEdge <span class=\"token operator\">&&</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 更新边的结束点位置为当前鼠标位置</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>graph<span class=\"token punctuation\">.</span><span class=\"token function\">updateItem</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n target<span class=\"token punctuation\">:</span> point<span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// getEvents 中定义的 'edge:click' 的响应函数</span>\n <span class=\"token function\">onEdgeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> currentEdge <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 拖拽过程中，点击会点击到新增的边上</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>addingEdge <span class=\"token operator\">&&</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge <span class=\"token operator\">==</span> currentEdge<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">removeItem</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>edge <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>addingEdge <span class=\"token operator\">=</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <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":125,"column":1,"offset":3273},"end":{"line":181,"column":4,"offset":4714},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"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":183,"column":4,"offset":4719},"end":{"line":183,"column":8,"offset":4723},"indent":[]}}],"position":{"start":{"line":183,"column":1,"offset":4716},"end":{"line":183,"column":8,"offset":4723},"indent":[]},"data":{"id":"完整代码","htmlAttributes":{"id":"完整代码"},"hProperties":{"id":"完整代码"}}},{"type":"paragraph","children":[{"type":"text","value":"完整 demo 代码参见：","position":{"start":{"line":184,"column":1,"offset":4724},"end":{"line":184,"column":14,"offset":4737},"indent":[]}},{"type":"link","title":null,"url":"https://codepen.io/Yanyan-Wang/pen/qBBNaye","children":[{"type":"text","value":"动态添加元素","position":{"start":{"line":184,"column":15,"offset":4738},"end":{"line":184,"column":21,"offset":4744},"indent":[]}}],"position":{"start":{"line":184,"column":14,"offset":4737},"end":{"line":184,"column":66,"offset":4789},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":184,"column":66,"offset":4789},"end":{"line":184,"column":67,"offset":4790},"indent":[]}}],"position":{"start":{"line":184,"column":1,"offset":4724},"end":{"line":184,"column":67,"offset":4790},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":185,"column":1,"offset":4791}}}}