@antv/g6
Version:
graph visualization frame work
1 lines • 12.5 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-c340b0c05bd0ed4bbe4f52cd897c186a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"<h2 id=\"什么是-mode\"><a href=\"#%E4%BB%80%E4%B9%88%E6%98%AF-mode\" aria-label=\"什么是 mode 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>什么是 Mode</h2>\n<p>用户在交互一张图时，可能由于意图不同而存在不同的交互模式，例如在编辑模式下点击节点需要弹出窗口让用户编辑，在查看模式下点击节点需要选中节点。</p>\n<p>为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 <a href=\"./defaultBehavior\">Behavior</a> 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 <a href=\"./defaultBehavior\">Behavior</a>。</p>\n<p>例如，存在 default 和 edit 两种 mode（交互模式）:</p>\n<ul>\n<li>default 模式中包含点击选中节点行为和拖拽画布行为;</li>\n<li>edit 模式中包含点击节点弹出编辑框行为和拖拽节点行为。</li>\n</ul>\n<p>默认情况下，该图对 default 模式中的行为见效，即点击节点时节点被选中而不是弹出编辑框。用户可以通过简单的命令切换该图的行为模式到 edit 模式，则 default 模式中的行为失效，edit 交互模式中的行为起效，即点击节点将弹出编辑框。</p>\n<h2 id=\"配置-mode\"><a href=\"#%E9%85%8D%E7%BD%AE-mode\" aria-label=\"配置 mode 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>配置 Mode</h2>\n<p>在实例化图时配置 <code class=\"language-text\">modes</code> 属性：</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 modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 支持的 behavior</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'zoom-canvas'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n edit<span class=\"token punctuation\">:</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</code></pre></div>\n<p>以上是模式定义的一个例子。在图上定义了两个模式，分别是 <code class=\"language-text\">default</code>， <code class=\"language-text\">edit</code> 。其中 <code class=\"language-text\">default</code> 包含两个 <a href=\"./defaultBehavior\">Behavior</a>：<code class=\"language-text\">'drag-canvas'</code> 和 <code class=\"language-text\">'``zoom-canvas'</code>，都使用行为的默认参数。</p>\n<h2 id=\"切换-mode\"><a href=\"#%E5%88%87%E6%8D%A2-mode\" aria-label=\"切换 mode 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>切换 Mode</h2>\n<p>默认时 Graph 会使用 <code class=\"language-text\">default</code> 的 Mode ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 <code class=\"language-text\">graph.``setMode('edit')</code> 来切换到 <code class=\"language-text\">edit</code> 的 Mode 。</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">setMode</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edit'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>此时 Graph 就支持了拖拽节点，<code class=\"language-text\">default</code> 模式下的拖拽画布 <code class=\"language-text\">'drag-canvas'</code>、放缩画布行为 <code class=\"language-text\">'zoom-canvas'</code> 失效。</p>\n<p>在调用了 <code class=\"language-text\">setMode</code> 方法后，G6 内部进行了以下操作：</p>\n<ul>\n<li>解绑目前图模式的所有事件监听；</li>\n<li>生成新的 Behavior ，进行事件初始化；</li>\n<li>绑定新的行为对应的事件监听。</li>\n</ul>\n<h2 id=\"编辑已有的-mode\"><a href=\"#%E7%BC%96%E8%BE%91%E5%B7%B2%E6%9C%89%E7%9A%84-mode\" aria-label=\"编辑已有的 mode 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>编辑已有的 Mode</h2>\n<p>如果有已经定义好的 Behavior （<a href=\"./defaultBehavior\">内置 Behavior</a> 或 <a href=\"../../advanced/custom-behavior\">自定义 Behavior</a>），需要把它添加到某个模式下，可以通过 <code class=\"language-text\">graph.addBehaviors</code> 方法；需要从某个模式中移除一些 Behavior，可以使用 <code class=\"language-text\">graph.removeBehaviors</code> 方法。如下示例：</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 向 default 模式中添加名为 drag-canvas 的行为，并使用行为的默认配置</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 从 default 模式中移除名为 drag-canvas 的行为</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 向 edit 模式中添加名为 drag-canvas 的行为，并定义个性化配置</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span>\n direction<span class=\"token punctuation\">:</span> <span class=\"token string\">'x'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">'edit'</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 从 edit 模式中移除名为 drag-canvas 的行为</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'edit'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 一次向 default 模式中添加多个行为</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'zoom-canvas'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 一次从 default 模式中移除多个行为</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'drag-canvas'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'zoom-canvas'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>\n<h2 id=\"相关阅读\"><a href=\"#%E7%9B%B8%E5%85%B3%E9%98%85%E8%AF%BB\" 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<ul>\n<li><a href=\"./defaultBehavior\">内置交互行为 Behavior</a></li>\n<li><a href=\"../../advanced/custom-behavior\">自定义交互行为 Behavior</a></li>\n</ul>"}