@antv/g6
Version:
graph visualization frame work
1 lines • 30.7 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-29320b868621575f8ae3188dbae7b2e1-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 除了提供丰富的 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":12,"offset":12}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/default-behavior","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"内置交互行为 Behavior","position":{"start":{"line":2,"column":13,"offset":13},"end":{"line":2,"column":28,"offset":28}}}],"position":{"start":{"line":2,"column":12,"offset":12},"end":{"line":2,"column":77,"offset":77}}},{"type":"text","value":" 外，还提供了自定义交互行为的机制，方便用户开发更加定制化的交互行为。","position":{"start":{"line":2,"column":77,"offset":77},"end":{"line":2,"column":112,"offset":112}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":112,"offset":112}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在交互行为上， G6 主要考虑了三个场景：","position":{"start":{"line":4,"column":1,"offset":114},"end":{"line":4,"column":22,"offset":135}}}],"position":{"start":{"line":4,"column":1,"offset":114},"end":{"line":4,"column":22,"offset":135}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"展示关系数据；","position":{"start":{"line":6,"column":3,"offset":139},"end":{"line":6,"column":10,"offset":146}}}],"position":{"start":{"line":6,"column":1,"offset":137},"end":{"line":6,"column":10,"offset":146}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"可视化建模；","position":{"start":{"line":7,"column":3,"offset":149},"end":{"line":7,"column":9,"offset":155}}}],"position":{"start":{"line":7,"column":1,"offset":147},"end":{"line":7,"column":9,"offset":155}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"图分析。","position":{"start":{"line":8,"column":3,"offset":158},"end":{"line":8,"column":7,"offset":162}}}],"position":{"start":{"line":8,"column":1,"offset":156},"end":{"line":8,"column":7,"offset":162}}},{"type":"text","value":"\n"}],"position":{"start":{"line":6,"column":1,"offset":137},"end":{"line":8,"column":7,"offset":162}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在这些场景中只要用户可能无法一眼看清楚所有需要的信息，都需要进行交互，例如：","position":{"start":{"line":10,"column":1,"offset":164},"end":{"line":10,"column":39,"offset":202}}}],"position":{"start":{"line":10,"column":1,"offset":164},"end":{"line":10,"column":39,"offset":202}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"图太大，需要缩放；","position":{"start":{"line":12,"column":3,"offset":206},"end":{"line":12,"column":12,"offset":215}}}],"position":{"start":{"line":12,"column":1,"offset":204},"end":{"line":12,"column":12,"offset":215}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"单个节点上展示的信息太少，需要通过 tooltip 显示详情；","position":{"start":{"line":13,"column":3,"offset":218},"end":{"line":13,"column":34,"offset":249}}}],"position":{"start":{"line":13,"column":1,"offset":216},"end":{"line":13,"column":34,"offset":249}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"对节点进行增删改查。","position":{"start":{"line":14,"column":3,"offset":252},"end":{"line":14,"column":13,"offset":262}}}],"position":{"start":{"line":14,"column":1,"offset":250},"end":{"line":14,"column":13,"offset":262}}},{"type":"text","value":"\n"}],"position":{"start":{"line":12,"column":1,"offset":204},"end":{"line":14,"column":13,"offset":262}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"我们无法将所有常用的交互全部内置到 G6 中。由于场景不一样，业务不一样，同样的目的需要的交互都不一样：","position":{"start":{"line":16,"column":1,"offset":264},"end":{"line":16,"column":53,"offset":316}}}],"position":{"start":{"line":16,"column":1,"offset":264},"end":{"line":16,"column":53,"offset":316}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"有些系统需要从工具栏上点击后添加节点，有些系统需要从面板栏上拖出出新的节点；","position":{"start":{"line":18,"column":3,"offset":320},"end":{"line":18,"column":41,"offset":358}}}],"position":{"start":{"line":18,"column":1,"offset":318},"end":{"line":18,"column":41,"offset":358}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"有的业务添加边需要从锚点上拖拽出来，而有些直接点击节点后就可以拖拽出边；","position":{"start":{"line":19,"column":3,"offset":361},"end":{"line":19,"column":39,"offset":397}}}],"position":{"start":{"line":19,"column":1,"offset":359},"end":{"line":19,"column":39,"offset":397}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"有些边可以连接到所有节点上，而有些边不能连接到具体某个节点的某个锚点上；","position":{"start":{"line":20,"column":3,"offset":400},"end":{"line":20,"column":39,"offset":436}}}],"position":{"start":{"line":20,"column":1,"offset":398},"end":{"line":20,"column":39,"offset":436}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"所有的交互的触发、持续、结束都要允许能够进行个性化的判定。","position":{"start":{"line":21,"column":3,"offset":439},"end":{"line":21,"column":32,"offset":468}}}],"position":{"start":{"line":21,"column":1,"offset":437},"end":{"line":21,"column":32,"offset":468}}},{"type":"text","value":"\n"}],"position":{"start":{"line":18,"column":1,"offset":318},"end":{"line":21,"column":32,"offset":468}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑， G6 提供了一套非常简单而灵活的机制来实现交互。","position":{"start":{"line":23,"column":1,"offset":470},"end":{"line":23,"column":75,"offset":544}}}],"position":{"start":{"line":23,"column":1,"offset":470},"end":{"line":23,"column":75,"offset":544}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"behavior-的生命周期"},"children":[{"type":"element","tagName":"a","properties":{"href":"#behavior-%E7%9A%84%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F","aria-label":"behavior 的生命周期 permalink","class":"anchor"},"children":[{"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":"Behavior 的生命周期","position":{"start":{"line":26,"column":4,"offset":550},"end":{"line":26,"column":18,"offset":564}}}],"position":{"start":{"line":26,"column":1,"offset":547},"end":{"line":26,"column":18,"offset":564}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为实现交互，首先需要了解交互的生命周期。交互起源于用户在系统上的所有事件，是否允许交互发生同事件密切相关。所以我们看到交互的生命周期，即操作事件的过程如下：","position":{"start":{"line":27,"column":1,"offset":565},"end":{"line":27,"column":79,"offset":643}}}],"position":{"start":{"line":27,"column":1,"offset":565},"end":{"line":27,"column":79,"offset":643}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"绑定事件；","position":{"start":{"line":29,"column":3,"offset":647},"end":{"line":29,"column":8,"offset":652}}}],"position":{"start":{"line":29,"column":1,"offset":645},"end":{"line":29,"column":8,"offset":652}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"触发事件；","position":{"start":{"line":30,"column":3,"offset":655},"end":{"line":30,"column":8,"offset":660}}}],"position":{"start":{"line":30,"column":1,"offset":653},"end":{"line":30,"column":8,"offset":660}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"持续事件；","position":{"start":{"line":31,"column":3,"offset":663},"end":{"line":31,"column":8,"offset":668}}}],"position":{"start":{"line":31,"column":1,"offset":661},"end":{"line":31,"column":8,"offset":668}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"结束事件；","position":{"start":{"line":32,"column":3,"offset":671},"end":{"line":32,"column":8,"offset":676}}}],"position":{"start":{"line":32,"column":1,"offset":669},"end":{"line":32,"column":8,"offset":676}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"移除事件。","position":{"start":{"line":33,"column":3,"offset":679},"end":{"line":33,"column":8,"offset":684}}}],"position":{"start":{"line":33,"column":1,"offset":677},"end":{"line":33,"column":8,"offset":684}}},{"type":"text","value":"\n"}],"position":{"start":{"line":29,"column":1,"offset":645},"end":{"line":33,"column":8,"offset":684}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"自定义交互-registerbehavior"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A4%E4%BA%92-registerbehavior","aria-label":"自定义交互 registerbehavior permalink","class":"anchor"},"children":[{"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":"自定义交互 registerBehavior","position":{"start":{"line":36,"column":4,"offset":690},"end":{"line":36,"column":26,"offset":712}}}],"position":{"start":{"line":36,"column":1,"offset":687},"end":{"line":36,"column":26,"offset":712}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过 ","position":{"start":{"line":37,"column":1,"offset":713},"end":{"line":37,"column":4,"offset":716}}},{"type":"raw","value":"<code class=\"language-text\">G6.registerBehavior</code>","position":{"start":{"line":37,"column":4,"offset":716},"end":{"line":37,"column":25,"offset":737}}},{"type":"text","value":" 自定义 Behavior。下面代码实现了名为 ","position":{"start":{"line":37,"column":25,"offset":737},"end":{"line":37,"column":49,"offset":761}}},{"type":"raw","value":"<code class=\"language-text\">'activate-node'</code>","position":{"start":{"line":37,"column":49,"offset":761},"end":{"line":37,"column":67,"offset":779}}},{"type":"text","value":"的交互行为，在终端用户点击节点时，置该节点的 ","position":{"start":{"line":37,"column":67,"offset":779},"end":{"line":37,"column":90,"offset":802}}},{"type":"raw","value":"<code class=\"language-text\">active</code>","position":{"start":{"line":37,"column":90,"offset":802},"end":{"line":37,"column":98,"offset":810}}},{"type":"text","value":" 状态为 ","position":{"start":{"line":37,"column":98,"offset":810},"end":{"line":37,"column":103,"offset":815}}},{"type":"raw","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":37,"column":103,"offset":815},"end":{"line":37,"column":109,"offset":821}}},{"type":"text","value":"；再次点击或点击画布时，置该节点的 ","position":{"start":{"line":37,"column":109,"offset":821},"end":{"line":37,"column":127,"offset":839}}},{"type":"raw","value":"<code class=\"language-text\">active</code>","position":{"start":{"line":37,"column":127,"offset":839},"end":{"line":37,"column":135,"offset":847}}},{"type":"text","value":" 状态为 ","position":{"start":{"line":37,"column":135,"offset":847},"end":{"line":37,"column":140,"offset":852}}},{"type":"raw","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":37,"column":140,"offset":852},"end":{"line":37,"column":147,"offset":859}}},{"type":"text","value":"。","position":{"start":{"line":37,"column":147,"offset":859},"end":{"line":37,"column":148,"offset":860}}}],"position":{"start":{"line":37,"column":1,"offset":713},"end":{"line":37,"column":148,"offset":860}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<span style=\"background-color: rgb(251, 233, 231); color: rgb(139, 53, 56)\">","position":{"start":{"line":39,"column":1,"offset":862},"end":{"line":39,"column":77,"offset":938}}},{"type":"text","value":" ","position":{"start":{"line":39,"column":77,"offset":938},"end":{"line":39,"column":78,"offset":939}}},{"type":"text","value":" ","position":{"start":{"line":39,"column":78,"offset":939},"end":{"line":39,"column":84,"offset":945}}},{"type":"text","value":" ","position":{"start":{"line":39,"column":84,"offset":945},"end":{"line":39,"column":90,"offset":951}}},{"type":"text","value":"注意：","position":{"start":{"line":39,"column":90,"offset":951},"end":{"line":39,"column":93,"offset":954}}},{"type":"raw","value":"</span>","position":{"start":{"line":39,"column":93,"offset":954},"end":{"line":39,"column":100,"offset":961}}}],"position":{"start":{"line":39,"column":1,"offset":862},"end":{"line":39,"column":100,"offset":961}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"下面代码仅设置了不同交互后节点的状态，没有指定这些状态下节点的样式。若需要根据节点状态变化它的样式，参见 ","position":{"start":{"line":41,"column":3,"offset":965},"end":{"line":41,"column":56,"offset":1018}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/fqnn9w#I23fx","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"配置不同 State 样式","position":{"start":{"line":41,"column":57,"offset":1019},"end":{"line":41,"column":70,"offset":1032}}}],"position":{"start":{"line":41,"column":56,"offset":1018},"end":{"line":41,"column":115,"offset":1077}}},{"type":"text","value":"。","position":{"start":{"line":41,"column":115,"offset":1077},"end":{"line":41,"column":116,"offset":1078}}}],"position":{"start":{"line":41,"column":1,"offset":963},"end":{"line":41,"column":116,"offset":1078}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"自定义 Behavior 时，可选的方法请参数 ","position":{"start":{"line":42,"column":3,"offset":1081},"end":{"line":42,"column":27,"offset":1105}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/behavior-api","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Behavior API","position":{"start":{"line":42,"column":28,"offset":1106},"end":{"line":42,"column":40,"offset":1118}}}],"position":{"start":{"line":42,"column":27,"offset":1105},"end":{"line":42,"column":85,"offset":1163}}},{"type":"text","value":"；","position":{"start":{"line":42,"column":85,"offset":1163},"end":{"line":42,"column":86,"offset":1164}}}],"position":{"start":{"line":42,"column":1,"offset":1079},"end":{"line":42,"column":86,"offset":1164}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">getEvent</code>","position":{"start":{"line":43,"column":3,"offset":1167},"end":{"line":43,"column":13,"offset":1177}}},{"type":"text","value":" 返回该 Behavior 所需监听事件的对象，G6 中支持的所有事件，请参考 ","position":{"start":{"line":43,"column":13,"offset":1177},"end":{"line":43,"column":53,"offset":1217}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/event-api","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Event API","position":{"start":{"line":43,"column":54,"offset":1218},"end":{"line":43,"column":63,"offset":1227}}}],"position":{"start":{"line":43,"column":53,"offset":1217},"end":{"line":43,"column":105,"offset":1269}}},{"type":"text","value":"。","position":{"start":{"line":43,"column":105,"offset":1269},"end":{"line":43,"column":106,"offset":1270}}}],"position":{"start":{"line":43,"column":3,"offset":1167},"end":{"line":43,"column":106,"offset":1270}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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\">'activate-node'</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 multiple<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</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 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\">'canvas:click'</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'onCanvasClick'</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n<span class=\"token function\">onNodeClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</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 keyword\">const</span> item <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">.</span><span class=\"token function\">hasState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'active'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</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 punctuation\">}</span>\n<span class=\"token comment\">// this 上即可取到配置，如果不允许多个active，先取消其他节点的active状态</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>multiple<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">removeNodesState</span><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 comment\">// 置点击的节点状态为active</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</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 function\">onCanvasClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n<span class=\"token comment\">// shouldUpdate可以由用户复写，返回 true 时取消所有节点的active状态</span>\n<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">shouldUpdate</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">removeNodesState</span><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 function\">removeNodesState</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">findAllByState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'active'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">,</span> <span class=\"token string\">'active'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><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<span class=\"token punctuation\">}</span> \n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","position":{"start":{"line":44,"column":1,"offset":1271},"end":{"line":83,"column":4,"offset":2161}}},{"type":"text","value":"\n"}],"position":{"start":{"line":43,"column":1,"offset":1165},"end":{"line":83,"column":4,"offset":2161}}},{"type":"text","value":"\n"}],"position":{"start":{"line":41,"column":1,"offset":963},"end":{"line":83,"column":4,"offset":2161}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"使用自定义的-behavior"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-behavior","aria-label":"使用自定义的 behavior permalink","class":"anchor"},"children":[{"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":"使用自定义的 Behavior","position":{"start":{"line":86,"column":4,"offset":2167},"end":{"line":86,"column":19,"offset":2182}}}],"position":{"start":{"line":86,"column":1,"offset":2164},"end":{"line":86,"column":19,"offset":2182}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"有了上面代码定义的名为 ","position":{"start":{"line":87,"column":1,"offset":2183},"end":{"line":87,"column":13,"offset":2195}}},{"type":"raw","value":"<code class=\"language-text\">'activate-node'</code>","position":{"start":{"line":87,"column":13,"offset":2195},"end":{"line":87,"column":30,"offset":2212}}},{"type":"text","value":" 的 Behavior 以后，在实例化 Graph 时，在 ","position":{"start":{"line":87,"column":30,"offset":2212},"end":{"line":87,"column":60,"offset":2242}}},{"type":"raw","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":87,"column":60,"offset":2242},"end":{"line":87,"column":67,"offset":2249}}},{"type":"text","value":" 中将其配置到默认或其他","position":{"start":{"line":87,"column":67,"offset":2249},"end":{"line":87,"column":79,"offset":2261}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/g6-mode","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"行为模式","position":{"start":{"line":87,"column":80,"offset":2262},"end":{"line":87,"column":84,"offset":2266}}}],"position":{"start":{"line":87,"column":79,"offset":2261},"end":{"line":87,"column":124,"offset":2306}}},{"type":"text","value":"中。下面代码将其配置到了默认行为模式中，在默认模式下，该行为将会生效。","position":{"start":{"line":87,"column":124,"offset":2306},"end":{"line":87,"column":159,"offset":2341}}}],"position":{"start":{"line":87,"column":1,"offset":2183},"end":{"line":87,"column":159,"offset":2341}}},{"type":"text","value":"\n"},{"type":"raw","value":"<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 指定到这里，就可以支持Behavior中定义的交互</span>\n <span class=\"token keyword\">default</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'activate-node'</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":88,"column":1,"offset":2342},"end":{"line":99,"column":4,"offset":2538}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":101,"column":1,"offset":2540}}}}