@antv/g6
Version:
graph visualization frame work
1 lines • 33.6 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-29320b868621575f8ae3188dbae7b2e1-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":12,"offset":12},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/default-behavior","children":[{"type":"text","value":"内置交互行为 Behavior","position":{"start":{"line":2,"column":13,"offset":13},"end":{"line":2,"column":28,"offset":28},"indent":[]}}],"position":{"start":{"line":2,"column":12,"offset":12},"end":{"line":2,"column":77,"offset":77},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" 外，还提供了自定义交互行为的机制，方便用户开发更加定制化的交互行为。","position":{"start":{"line":2,"column":77,"offset":77},"end":{"line":2,"column":112,"offset":112},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":112,"offset":112},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在交互行为上， G6 主要考虑了三个场景：","position":{"start":{"line":4,"column":1,"offset":114},"end":{"line":4,"column":22,"offset":135},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":114},"end":{"line":4,"column":22,"offset":135},"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":6,"column":3,"offset":139},"end":{"line":6,"column":10,"offset":146},"indent":[]}}],"position":{"start":{"line":6,"column":3,"offset":139},"end":{"line":6,"column":10,"offset":146},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":137},"end":{"line":6,"column":10,"offset":146},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"可视化建模；","position":{"start":{"line":7,"column":3,"offset":149},"end":{"line":7,"column":9,"offset":155},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":149},"end":{"line":7,"column":9,"offset":155},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":147},"end":{"line":7,"column":9,"offset":155},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"图分析。","position":{"start":{"line":8,"column":3,"offset":158},"end":{"line":8,"column":7,"offset":162},"indent":[]}}],"position":{"start":{"line":8,"column":3,"offset":158},"end":{"line":8,"column":7,"offset":162},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":156},"end":{"line":8,"column":7,"offset":162},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":137},"end":{"line":8,"column":7,"offset":162},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"在这些场景中只要用户可能无法一眼看清楚所有需要的信息，都需要进行交互，例如：","position":{"start":{"line":10,"column":1,"offset":164},"end":{"line":10,"column":39,"offset":202},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":164},"end":{"line":10,"column":39,"offset":202},"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":12,"column":3,"offset":206},"end":{"line":12,"column":12,"offset":215},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":206},"end":{"line":12,"column":12,"offset":215},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":204},"end":{"line":12,"column":12,"offset":215},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"单个节点上展示的信息太少，需要通过 tooltip 显示详情；","position":{"start":{"line":13,"column":3,"offset":218},"end":{"line":13,"column":34,"offset":249},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":218},"end":{"line":13,"column":34,"offset":249},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":216},"end":{"line":13,"column":34,"offset":249},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"对节点进行增删改查。","position":{"start":{"line":14,"column":3,"offset":252},"end":{"line":14,"column":13,"offset":262},"indent":[]}}],"position":{"start":{"line":14,"column":3,"offset":252},"end":{"line":14,"column":13,"offset":262},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":250},"end":{"line":14,"column":13,"offset":262},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":204},"end":{"line":14,"column":13,"offset":262},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"我们无法将所有常用的交互全部内置到 G6 中。由于场景不一样，业务不一样，同样的目的需要的交互都不一样：","position":{"start":{"line":16,"column":1,"offset":264},"end":{"line":16,"column":53,"offset":316},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":264},"end":{"line":16,"column":53,"offset":316},"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":18,"column":3,"offset":320},"end":{"line":18,"column":41,"offset":358},"indent":[]}}],"position":{"start":{"line":18,"column":3,"offset":320},"end":{"line":18,"column":41,"offset":358},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":318},"end":{"line":18,"column":41,"offset":358},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"有的业务添加边需要从锚点上拖拽出来，而有些直接点击节点后就可以拖拽出边；","position":{"start":{"line":19,"column":3,"offset":361},"end":{"line":19,"column":39,"offset":397},"indent":[]}}],"position":{"start":{"line":19,"column":3,"offset":361},"end":{"line":19,"column":39,"offset":397},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":359},"end":{"line":19,"column":39,"offset":397},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"有些边可以连接到所有节点上，而有些边不能连接到具体某个节点的某个锚点上；","position":{"start":{"line":20,"column":3,"offset":400},"end":{"line":20,"column":39,"offset":436},"indent":[]}}],"position":{"start":{"line":20,"column":3,"offset":400},"end":{"line":20,"column":39,"offset":436},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":398},"end":{"line":20,"column":39,"offset":436},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"所有的交互的触发、持续、结束都要允许能够进行个性化的判定。","position":{"start":{"line":21,"column":3,"offset":439},"end":{"line":21,"column":32,"offset":468},"indent":[]}}],"position":{"start":{"line":21,"column":3,"offset":439},"end":{"line":21,"column":32,"offset":468},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":437},"end":{"line":21,"column":32,"offset":468},"indent":[]}}],"position":{"start":{"line":18,"column":1,"offset":318},"end":{"line":21,"column":32,"offset":468},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"我们可以看到在图上的交互是繁杂多变的。各种冲突、各种配置项会让用户和开发者疲于应对。出于这些考虑， G6 提供了一套非常简单而灵活的机制来实现交互。","position":{"start":{"line":23,"column":1,"offset":470},"end":{"line":23,"column":75,"offset":544},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":470},"end":{"line":23,"column":75,"offset":544},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#behavior-的生命周期","title":null,"children":[],"data":{"hProperties":{"aria-label":"behavior 的生命周期 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":"Behavior 的生命周期","position":{"start":{"line":26,"column":4,"offset":550},"end":{"line":26,"column":18,"offset":564},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":547},"end":{"line":26,"column":18,"offset":564},"indent":[]},"data":{"id":"behavior-的生命周期","htmlAttributes":{"id":"behavior-的生命周期"},"hProperties":{"id":"behavior-的生命周期"}}},{"type":"paragraph","children":[{"type":"text","value":"为实现交互，首先需要了解交互的生命周期。交互起源于用户在系统上的所有事件，是否允许交互发生同事件密切相关。所以我们看到交互的生命周期，即操作事件的过程如下：","position":{"start":{"line":27,"column":1,"offset":565},"end":{"line":27,"column":79,"offset":643},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":565},"end":{"line":27,"column":79,"offset":643},"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":29,"column":3,"offset":647},"end":{"line":29,"column":8,"offset":652},"indent":[]}}],"position":{"start":{"line":29,"column":3,"offset":647},"end":{"line":29,"column":8,"offset":652},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":645},"end":{"line":29,"column":8,"offset":652},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"触发事件；","position":{"start":{"line":30,"column":3,"offset":655},"end":{"line":30,"column":8,"offset":660},"indent":[]}}],"position":{"start":{"line":30,"column":3,"offset":655},"end":{"line":30,"column":8,"offset":660},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":653},"end":{"line":30,"column":8,"offset":660},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"持续事件；","position":{"start":{"line":31,"column":3,"offset":663},"end":{"line":31,"column":8,"offset":668},"indent":[]}}],"position":{"start":{"line":31,"column":3,"offset":663},"end":{"line":31,"column":8,"offset":668},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":661},"end":{"line":31,"column":8,"offset":668},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"结束事件；","position":{"start":{"line":32,"column":3,"offset":671},"end":{"line":32,"column":8,"offset":676},"indent":[]}}],"position":{"start":{"line":32,"column":3,"offset":671},"end":{"line":32,"column":8,"offset":676},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":669},"end":{"line":32,"column":8,"offset":676},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"移除事件。","position":{"start":{"line":33,"column":3,"offset":679},"end":{"line":33,"column":8,"offset":684},"indent":[]}}],"position":{"start":{"line":33,"column":3,"offset":679},"end":{"line":33,"column":8,"offset":684},"indent":[]}}],"position":{"start":{"line":33,"column":1,"offset":677},"end":{"line":33,"column":8,"offset":684},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":645},"end":{"line":33,"column":8,"offset":684},"indent":[1,1,1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#自定义交互-registerbehavior","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义交互 registerbehavior 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":"自定义交互 registerBehavior","position":{"start":{"line":36,"column":4,"offset":690},"end":{"line":36,"column":26,"offset":712},"indent":[]}}],"position":{"start":{"line":36,"column":1,"offset":687},"end":{"line":36,"column":26,"offset":712},"indent":[]},"data":{"id":"自定义交互-registerbehavior","htmlAttributes":{"id":"自定义交互-registerbehavior"},"hProperties":{"id":"自定义交互-registerbehavior"}}},{"type":"paragraph","children":[{"type":"text","value":"通过 ","position":{"start":{"line":37,"column":1,"offset":713},"end":{"line":37,"column":4,"offset":716},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">G6.registerBehavior</code>","position":{"start":{"line":37,"column":4,"offset":716},"end":{"line":37,"column":25,"offset":737},"indent":[]}},{"type":"text","value":" 自定义 Behavior。下面代码实现了名为 ","position":{"start":{"line":37,"column":25,"offset":737},"end":{"line":37,"column":49,"offset":761},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'activate-node'</code>","position":{"start":{"line":37,"column":49,"offset":761},"end":{"line":37,"column":67,"offset":779},"indent":[]}},{"type":"text","value":"的交互行为，在终端用户点击节点时，置该节点的 ","position":{"start":{"line":37,"column":67,"offset":779},"end":{"line":37,"column":90,"offset":802},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">active</code>","position":{"start":{"line":37,"column":90,"offset":802},"end":{"line":37,"column":98,"offset":810},"indent":[]}},{"type":"text","value":" 状态为 ","position":{"start":{"line":37,"column":98,"offset":810},"end":{"line":37,"column":103,"offset":815},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":37,"column":103,"offset":815},"end":{"line":37,"column":109,"offset":821},"indent":[]}},{"type":"text","value":"；再次点击或点击画布时，置该节点的 ","position":{"start":{"line":37,"column":109,"offset":821},"end":{"line":37,"column":127,"offset":839},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">active</code>","position":{"start":{"line":37,"column":127,"offset":839},"end":{"line":37,"column":135,"offset":847},"indent":[]}},{"type":"text","value":" 状态为 ","position":{"start":{"line":37,"column":135,"offset":847},"end":{"line":37,"column":140,"offset":852},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":37,"column":140,"offset":852},"end":{"line":37,"column":147,"offset":859},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":37,"column":147,"offset":859},"end":{"line":37,"column":148,"offset":860},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":713},"end":{"line":37,"column":148,"offset":860},"indent":[]}},{"type":"paragraph","children":[{"type":"html","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},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":39,"column":77,"offset":938},"end":{"line":39,"column":78,"offset":939},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":39,"column":78,"offset":939},"end":{"line":39,"column":84,"offset":945},"indent":[]}},{"type":"text","value":" ","position":{"start":{"line":39,"column":84,"offset":945},"end":{"line":39,"column":90,"offset":951},"indent":[]}},{"type":"text","value":"注意：","position":{"start":{"line":39,"column":90,"offset":951},"end":{"line":39,"column":93,"offset":954},"indent":[]}},{"type":"html","value":"</span>","position":{"start":{"line":39,"column":93,"offset":954},"end":{"line":39,"column":100,"offset":961},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":862},"end":{"line":39,"column":100,"offset":961},"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":41,"column":3,"offset":965},"end":{"line":41,"column":56,"offset":1018},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/fqnn9w#I23fx","children":[{"type":"text","value":"配置不同 State 样式","position":{"start":{"line":41,"column":57,"offset":1019},"end":{"line":41,"column":70,"offset":1032},"indent":[]}}],"position":{"start":{"line":41,"column":56,"offset":1018},"end":{"line":41,"column":115,"offset":1077},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":41,"column":115,"offset":1077},"end":{"line":41,"column":116,"offset":1078},"indent":[]}}],"position":{"start":{"line":41,"column":3,"offset":965},"end":{"line":41,"column":116,"offset":1078},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":963},"end":{"line":41,"column":116,"offset":1078},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"自定义 Behavior 时，可选的方法请参数 ","position":{"start":{"line":42,"column":3,"offset":1081},"end":{"line":42,"column":27,"offset":1105},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/behavior-api","children":[{"type":"text","value":"Behavior API","position":{"start":{"line":42,"column":28,"offset":1106},"end":{"line":42,"column":40,"offset":1118},"indent":[]}}],"position":{"start":{"line":42,"column":27,"offset":1105},"end":{"line":42,"column":85,"offset":1163},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"；","position":{"start":{"line":42,"column":85,"offset":1163},"end":{"line":42,"column":86,"offset":1164},"indent":[]}}],"position":{"start":{"line":42,"column":3,"offset":1081},"end":{"line":42,"column":86,"offset":1164},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":1079},"end":{"line":42,"column":86,"offset":1164},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">getEvent</code>","position":{"start":{"line":43,"column":3,"offset":1167},"end":{"line":43,"column":13,"offset":1177},"indent":[]}},{"type":"text","value":" 返回该 Behavior 所需监听事件的对象，G6 中支持的所有事件，请参考 ","position":{"start":{"line":43,"column":13,"offset":1177},"end":{"line":43,"column":53,"offset":1217},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/event-api","children":[{"type":"text","value":"Event API","position":{"start":{"line":43,"column":54,"offset":1218},"end":{"line":43,"column":63,"offset":1227},"indent":[]}}],"position":{"start":{"line":43,"column":53,"offset":1217},"end":{"line":43,"column":105,"offset":1269},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":43,"column":105,"offset":1269},"end":{"line":43,"column":106,"offset":1270},"indent":[]}}],"position":{"start":{"line":43,"column":3,"offset":1167},"end":{"line":43,"column":106,"offset":1270},"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 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},"indent":[1,3,5,5,5,3,3,5,5,5,5,3,3,5,5,5,5,5,5,5,5,5,5,5,5,3,3,5,5,5,5,3,3,5,5,5,3,1,1]}}],"position":{"start":{"line":43,"column":1,"offset":1165},"end":{"line":83,"column":4,"offset":2161},"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]}}],"position":{"start":{"line":41,"column":1,"offset":963},"end":{"line":83,"column":4,"offset":2161},"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]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#使用自定义的-behavior","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用自定义的 behavior 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":"使用自定义的 Behavior","position":{"start":{"line":86,"column":4,"offset":2167},"end":{"line":86,"column":19,"offset":2182},"indent":[]}}],"position":{"start":{"line":86,"column":1,"offset":2164},"end":{"line":86,"column":19,"offset":2182},"indent":[]},"data":{"id":"使用自定义的-behavior","htmlAttributes":{"id":"使用自定义的-behavior"},"hProperties":{"id":"使用自定义的-behavior"}}},{"type":"paragraph","children":[{"type":"text","value":"有了上面代码定义的名为 ","position":{"start":{"line":87,"column":1,"offset":2183},"end":{"line":87,"column":13,"offset":2195},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'activate-node'</code>","position":{"start":{"line":87,"column":13,"offset":2195},"end":{"line":87,"column":30,"offset":2212},"indent":[]}},{"type":"text","value":" 的 Behavior 以后，在实例化 Graph 时，在 ","position":{"start":{"line":87,"column":30,"offset":2212},"end":{"line":87,"column":60,"offset":2242},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":87,"column":60,"offset":2242},"end":{"line":87,"column":67,"offset":2249},"indent":[]}},{"type":"text","value":" 中将其配置到默认或其他","position":{"start":{"line":87,"column":67,"offset":2249},"end":{"line":87,"column":79,"offset":2261},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/g6-mode","children":[{"type":"text","value":"行为模式","position":{"start":{"line":87,"column":80,"offset":2262},"end":{"line":87,"column":84,"offset":2266},"indent":[]}}],"position":{"start":{"line":87,"column":79,"offset":2261},"end":{"line":87,"column":124,"offset":2306},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"中。下面代码将其配置到了默认行为模式中，在默认模式下，该行为将会生效。","position":{"start":{"line":87,"column":124,"offset":2306},"end":{"line":87,"column":159,"offset":2341},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":2183},"end":{"line":87,"column":159,"offset":2341},"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 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},"indent":[1,1,1,1,1,1,1,1,1,1,1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":101,"column":1,"offset":2540}}}}