@antv/g6
Version:
graph visualization frame work
1 lines • 19 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-bd2ae87bb97fb0470d2a9b92415cb287-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<p>Behavior指G6中的复合交互，一般Behavior包含一个或多个事件的监听与处理以及一系列对图中元素的操作。</p>\n<p>Behavior默认包含shouldBegin，shouldUpdate，shouldEnd三个回调，代表是否开始行为，是否更新元素，是否进行结束行为，当返回值为false时阻止默认行为。</p>\n<h2 id=\"用法\"><a href=\"#%E7%94%A8%E6%B3%95\" aria-label=\"用法 permalink\" class=\"anchor\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>用法</h2>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><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\">'behaviorName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</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\">'onNodeClick'</span><span class=\"token punctuation\">,</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>\n <span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseMove'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onNodeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n \t<span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onEdgeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n \t<span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onMouseMove</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n \t<span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"getevents\"><a href=\"#getevents\" aria-label=\"getevents 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>getEvents()</h2>\n<p>自定义Behavior时，定义事件及处理事件的方法。</p>\n<p>getEvents()方法中可以使用的事件请参考<a href=\"./Event\">Event文档</a>。</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><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\">'behaviorName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</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\">'onNodeClick'</span><span class=\"token punctuation\">,</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>\n <span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseMove'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"onnodeclickevt\"><a href=\"#onnodeclickevt\" aria-label=\"onnodeclickevt 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>onNodeClick(evt)</h2>\n<p><code class=\"language-text\">onNodeClick</code>、<code class=\"language-text\">onEdgeClick</code>和<code class=\"language-text\">onMouseMove</code>都属于自定义方法，用于处理<code class=\"language-text\">node:click</code>、<code class=\"language-text\">edge:click</code>、<code class=\"language-text\">mousemove</code>等事件。</p>\n<p><strong>参数</strong></p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>类型</th>\n<th>是否必选</th>\n<th>描述</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>evt</td>\n<td>Event</td>\n<td>否</td>\n<td>包含事件句柄、当前操作对象及各坐标值等</td>\n</tr>\n</tbody>\n</table>\n<p><strong>参数evt包括以下属性：</strong></p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>类型</th>\n<th>描述</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>x</td>\n<td>number</td>\n<td>元素视口x坐标</td>\n</tr>\n<tr>\n<td>y</td>\n<td>number</td>\n<td>元素视口y坐标</td>\n</tr>\n<tr>\n<td>canvasX</td>\n<td>number</td>\n<td>元素Canvas x坐标</td>\n</tr>\n<tr>\n<td>canvasY</td>\n<td>number</td>\n<td>元素Canvas y坐标</td>\n</tr>\n<tr>\n<td>clientX</td>\n<td>number</td>\n<td>屏幕/页面x坐标</td>\n</tr>\n<tr>\n<td>clientY</td>\n<td>number</td>\n<td>屏幕/页面y坐标</td>\n</tr>\n<tr>\n<td>event</td>\n<td>MouseEvent</td>\n<td>事件句柄</td>\n</tr>\n<tr>\n<td>target</td>\n<td>Shape</td>\n<td>当前对象</td>\n</tr>\n<tr>\n<td>type</td>\n<td>string</td>\n<td>操作类型</td>\n</tr>\n<tr>\n<td>currentTarget</td>\n<td>object</td>\n<td></td>\n</tr>\n<tr>\n<td>item</td>\n<td>Shape</td>\n<td>操作的目标元素</td>\n</tr>\n<tr>\n<td>removed</td>\n<td>boolean</td>\n<td>是否删除/销毁</td>\n</tr>\n<tr>\n<td>timeStamp</td>\n<td>number</td>\n<td>时间戳</td>\n</tr>\n<tr>\n<td>bubbles</td>\n<td>boolean</td>\n<td>是否支持事件冒泡</td>\n</tr>\n<tr>\n<td>defaultPrevented</td>\n<td>boolean</td>\n<td>是否阻止默认事件</td>\n</tr>\n<tr>\n<td>cancelable</td>\n<td>boolean</td>\n<td>是否取消</td>\n</tr>\n</tbody>\n</table>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><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\">'behaviorName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</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\">'onNodeClick'</span><span class=\"token punctuation\">,</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>\n <span class=\"token string\">'mousemove'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onMouseMove'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onNodeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n \t<span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onEdgeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n \t<span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">onMouseMove</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">evt</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n \t<span class=\"token comment\">// TODO</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"getdefaultcfg\"><a href=\"#getdefaultcfg\" aria-label=\"getdefaultcfg 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>getDefaultCfg()</h2>\n<p>定义自定义Behavior时的默认参数，会与用户传入的参数进行合并。</p>\n<p><strong>提示：该方法是可选的</strong>。</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><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\">'behaviorName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">getDefaultCfg</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 trigger<span class=\"token punctuation\">:</span> <span class=\"token string\">'click'</span> <span class=\"token comment\">// mouseneter or click</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"shouldbeginevt\"><a href=\"#shouldbeginevt\" aria-label=\"shouldbeginevt 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>shouldBegin(evt)</h2>\n<p>是否阻止行为发生，默认返回true，不阻止行为，需要在处理逻辑中自行调用。</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><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\">'behaviorName'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">shouldBegin</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 这里可以根据业务自定义</span>\n <span class=\"token keyword\">return</span> <span class=\"token boolean\">true</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<h2 id=\"shouldupdateevt\"><a href=\"#shouldupdateevt\" aria-label=\"shouldupdateevt 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>shouldUpdate(evt)</h2>\n<p>是否更新数据及更改视图，默认返回true，允许更新，如果返回false，则不更新数据和视图。</p>\n<p><strong>用法</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><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 pixelRatio<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'self-behavior'</span><span class=\"token punctuation\">,</span>\n <span class=\"token function-variable function\">shouldUpdate</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\">if</span> <span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">.</span>type <span class=\"token operator\">!==</span> <span class=\"token string\">'text'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">return</span> <span class=\"token boolean\">true</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 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<h2 id=\"shouldendevt\"><a href=\"#shouldendevt\" aria-label=\"shouldendevt 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>shouldEnd(evt)</h2>\n<p>是否结束行为，默认返回true。</p>"}