@antv/g6
Version:
graph visualization frame work
1 lines • 34 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-fde852edd4249c7c6987617519f8bb59-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>本章以添加节点及在两个节点之间连线为例进行介绍 G6 中的交互。在阅读本章之前，需要先熟悉以下内容：</p>\n<ul>\n<li><a href=\"https://www.yuque.com/antv/g6/self-behavior\" target=\"_self\" rel=\"nofollow\">自定义交互行为 Behavior</a>；</li>\n<li><a href=\"https://www.yuque.com/antv/g6/g6-mode\" target=\"_self\" rel=\"nofollow\">交互模式 Mode</a>。</li>\n</ul>\n<p><img src=\"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\"><br />上图是本文要实现的最终效果。完整 demo 代码参见：<a href=\"https://codepen.io/Yanyan-Wang/pen/qBBNaye\" target=\"_self\" rel=\"nofollow\">动态添加元素</a>。<br />方下拉菜单中有三个选项，用于切换交互模式 mode：</p>\n<ul>\n<li>选择“默认”按钮时，切换到 default 交互模式：拖拽节点时节点跟随鼠标移动；点击节点时选中该节点；</li>\n<li>选择“添加节点”按钮时，切换到 addNode 交互模式：点击空白区域在点击处增加一个节点；点击节点时选中该节点；</li>\n<li>选择“添加边”按钮时，切换到 addEdge 交互模式：依次点击两个节点将会在这两个节点之间添加一条边。</li>\n</ul>\n<p><strong>使用多个 mode 的原因</strong><br /> 相同的鼠标操作，在不同场景下有不同的含义。例如：</p>\n<ul>\n<li>点击空白画布取消目前图上所有节点的选中状态、点击空白画布在响应位置添加节点，这两种需求都对应了用户点击画布空白处的操作；</li>\n<li>点击选中、点击两个节点添加边都涉及到了鼠标在节点上的点击操作。</li>\n</ul>\n<p>为了区分这些操作的含义，我们使用交互模式 mode 划分不同的场景。<br /></p>\n<h2 id=\"前提代码\"><a href=\"#%E5%89%8D%E6%8F%90%E4%BB%A3%E7%A0%81\" 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<p>下面 HTML 代码是本文的基础代码，后续功能将在这份代码中增量添加。下面代码定义了左上方的下拉菜单，以及后面将会用到图上的初始数据 <code class=\"language-text\">data</code>。</p>\n<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>\n<h2 id=\"配置交互模式\"><a href=\"#%E9%85%8D%E7%BD%AE%E4%BA%A4%E4%BA%92%E6%A8%A1%E5%BC%8F\" 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<p>下面代码实例化了图，并配置了交互模式的集合 <code class=\"language-text\">modes</code>，其中包括 <code class=\"language-text\">default</code> 默认交互模式、<code class=\"language-text\">addNode</code> 增加节点交互模式、<code class=\"language-text\">addEdge</code> 增加边交互模式。每种交互模式中都包含了各自的交互行为，其中 <code class=\"language-text\">'drag-node'</code>（拖拽节点） 和 <code class=\"language-text\">'click-select'</code>（点击选中） 是 G6 内置的交互行为，<code class=\"language-text\">'click-add-node'</code>（点击空白画布添加节点） 和 <code class=\"language-text\">'click-add-edge'</code>（点击两个节点添加边） 需要我们在后面进行自定义。</p>\n<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>\n<h4 id=\"添加节点\"><a href=\"#%E6%B7%BB%E5%8A%A0%E8%8A%82%E7%82%B9\" 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>添加节点</h4>\n<p>在上面的实例中，当选中添加节点按钮时，会切换到添加节点的 Mode 上。实现在点击空白画布时，在点击位置添加节点的方式是通过 <code class=\"language-text\">G6.registerBehavior</code> 自定义名为 <code class=\"language-text\">'click-add-node'</code>（名字可以自由设定） 的 Behavior 实现的 。</p>\n<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>\n<h4 id=\"添加边\"><a href=\"#%E6%B7%BB%E5%8A%A0%E8%BE%B9\" 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>添加边</h4>\n<p>在上面的案例中，当需要在两个节点之间连线时，要先切换到添加边的 Mode 上。下面代码自定义了名为 <code class=\"language-text\">'click-add-edge'</code>（名字可以自由设定）的 Behavior 实现两个节点之间连线。</p>\n<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>\n<h2 id=\"完整代码\"><a href=\"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81\" 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<p>完整 demo 代码参见：<a href=\"https://codepen.io/Yanyan-Wang/pen/qBBNaye\" target=\"_self\" rel=\"nofollow\">动态添加元素</a>。</p>"}