@antv/g6
Version:
graph visualization frame work
1 lines • 28.6 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-c340b0c05bd0ed4bbe4f52cd897c186a-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"heading","depth":2,"children":[{"type":"link","url":"#什么是-mode","title":null,"children":[],"data":{"hProperties":{"aria-label":"什么是 mode 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":"什么是 Mode","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":12,"offset":12},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":12,"offset":12},"indent":[]},"data":{"id":"什么是-mode","htmlAttributes":{"id":"什么是-mode"},"hProperties":{"id":"什么是-mode"}}},{"type":"paragraph","children":[{"type":"text","value":"用户在交互一张图时，可能由于意图不同而存在不同的交互模式，例如在编辑模式下点击节点需要弹出窗口让用户编辑，在查看模式下点击节点需要选中节点。","position":{"start":{"line":3,"column":1,"offset":13},"end":{"line":3,"column":71,"offset":83},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":13},"end":{"line":3,"column":71,"offset":83},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"为了解决上述问题，G6 提供了交互模式 Mode，它是图上交互行为 ","position":{"start":{"line":5,"column":1,"offset":85},"end":{"line":5,"column":35,"offset":119},"indent":[]}},{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"Behavior","position":{"start":{"line":5,"column":36,"offset":120},"end":{"line":5,"column":44,"offset":128},"indent":[]}}],"position":{"start":{"line":5,"column":35,"offset":119},"end":{"line":5,"column":64,"offset":148},"indent":[]}},{"type":"text","value":" 的管理机制。一个图上可以有存在多种交互模式，每个交互模式包含多种交互行为 ","position":{"start":{"line":5,"column":64,"offset":148},"end":{"line":5,"column":102,"offset":186},"indent":[]}},{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"Behavior","position":{"start":{"line":5,"column":103,"offset":187},"end":{"line":5,"column":111,"offset":195},"indent":[]}}],"position":{"start":{"line":5,"column":102,"offset":186},"end":{"line":5,"column":131,"offset":215},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":5,"column":131,"offset":215},"end":{"line":5,"column":132,"offset":216},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":85},"end":{"line":5,"column":132,"offset":216},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"例如，存在 default 和 edit 两种 mode（交互模式）:","position":{"start":{"line":7,"column":1,"offset":218},"end":{"line":7,"column":36,"offset":253},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":218},"end":{"line":7,"column":36,"offset":253},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"default 模式中包含点击选中节点行为和拖拽画布行为;","position":{"start":{"line":8,"column":3,"offset":256},"end":{"line":8,"column":32,"offset":285},"indent":[]}}],"position":{"start":{"line":8,"column":3,"offset":256},"end":{"line":8,"column":32,"offset":285},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":254},"end":{"line":8,"column":32,"offset":285},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"edit 模式中包含点击节点弹出编辑框行为和拖拽节点行为。","position":{"start":{"line":9,"column":3,"offset":288},"end":{"line":9,"column":32,"offset":317},"indent":[]}}],"position":{"start":{"line":9,"column":3,"offset":288},"end":{"line":9,"column":32,"offset":317},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":286},"end":{"line":9,"column":32,"offset":317},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":254},"end":{"line":9,"column":32,"offset":317},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"默认情况下，该图对 default 模式中的行为见效，即点击节点时节点被选中而不是弹出编辑框。用户可以通过简单的命令切换该图的行为模式到 edit 模式，则 default 模式中的行为失效，edit 交互模式中的行为起效，即点击节点将弹出编辑框。","position":{"start":{"line":11,"column":1,"offset":319},"end":{"line":11,"column":125,"offset":443},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":319},"end":{"line":11,"column":125,"offset":443},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#配置-mode","title":null,"children":[],"data":{"hProperties":{"aria-label":"配置 mode 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":"配置 Mode","position":{"start":{"line":13,"column":4,"offset":448},"end":{"line":13,"column":11,"offset":455},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":445},"end":{"line":13,"column":11,"offset":455},"indent":[]},"data":{"id":"配置-mode","htmlAttributes":{"id":"配置-mode"},"hProperties":{"id":"配置-mode"}}},{"type":"paragraph","children":[{"type":"text","value":"在实例化图时配置 ","position":{"start":{"line":14,"column":1,"offset":456},"end":{"line":14,"column":10,"offset":465},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":14,"column":10,"offset":465},"end":{"line":14,"column":17,"offset":472},"indent":[]}},{"type":"text","value":" 属性：","position":{"start":{"line":14,"column":17,"offset":472},"end":{"line":14,"column":21,"offset":476},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":456},"end":{"line":14,"column":21,"offset":476},"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</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>","position":{"start":{"line":15,"column":1,"offset":477},"end":{"line":26,"column":4,"offset":690},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"以上是模式定义的一个例子。在图上定义了两个模式，分别是 ","position":{"start":{"line":28,"column":1,"offset":692},"end":{"line":28,"column":29,"offset":720},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">default</code>","position":{"start":{"line":28,"column":29,"offset":720},"end":{"line":28,"column":38,"offset":729},"indent":[]}},{"type":"text","value":"， ","position":{"start":{"line":28,"column":38,"offset":729},"end":{"line":28,"column":40,"offset":731},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edit</code>","position":{"start":{"line":28,"column":40,"offset":731},"end":{"line":28,"column":46,"offset":737},"indent":[]}},{"type":"text","value":" 。其中 ","position":{"start":{"line":28,"column":46,"offset":737},"end":{"line":28,"column":51,"offset":742},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">default</code>","position":{"start":{"line":28,"column":51,"offset":742},"end":{"line":28,"column":60,"offset":751},"indent":[]}},{"type":"text","value":" 包含两个 ","position":{"start":{"line":28,"column":60,"offset":751},"end":{"line":28,"column":66,"offset":757},"indent":[]}},{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"Behavior","position":{"start":{"line":28,"column":67,"offset":758},"end":{"line":28,"column":75,"offset":766},"indent":[]}}],"position":{"start":{"line":28,"column":66,"offset":757},"end":{"line":28,"column":95,"offset":786},"indent":[]}},{"type":"text","value":"：","position":{"start":{"line":28,"column":95,"offset":786},"end":{"line":28,"column":96,"offset":787},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'drag-canvas'</code>","position":{"start":{"line":28,"column":96,"offset":787},"end":{"line":28,"column":111,"offset":802},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":28,"column":111,"offset":802},"end":{"line":28,"column":114,"offset":805},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'``zoom-canvas'</code>","position":{"start":{"line":28,"column":114,"offset":805},"end":{"line":28,"column":131,"offset":822},"indent":[]}},{"type":"text","value":"，都使用行为的默认参数。","position":{"start":{"line":28,"column":131,"offset":822},"end":{"line":28,"column":143,"offset":834},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":692},"end":{"line":28,"column":143,"offset":834},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#切换-mode","title":null,"children":[],"data":{"hProperties":{"aria-label":"切换 mode 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":"切换 Mode","position":{"start":{"line":30,"column":4,"offset":839},"end":{"line":30,"column":11,"offset":846},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":836},"end":{"line":30,"column":11,"offset":846},"indent":[]},"data":{"id":"切换-mode","htmlAttributes":{"id":"切换-mode"},"hProperties":{"id":"切换-mode"}}},{"type":"paragraph","children":[{"type":"text","value":"默认时 Graph 会使用 ","position":{"start":{"line":31,"column":1,"offset":847},"end":{"line":31,"column":15,"offset":861},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">default</code>","position":{"start":{"line":31,"column":15,"offset":861},"end":{"line":31,"column":24,"offset":870},"indent":[]}},{"type":"text","value":" 的 Mode ，可以拖动和缩放画布，当需要点击选中节点时，可以通过 ","position":{"start":{"line":31,"column":24,"offset":870},"end":{"line":31,"column":59,"offset":905},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.``setMode('edit')</code>","position":{"start":{"line":31,"column":59,"offset":905},"end":{"line":31,"column":84,"offset":930},"indent":[]}},{"type":"text","value":" 来切换到 ","position":{"start":{"line":31,"column":84,"offset":930},"end":{"line":31,"column":90,"offset":936},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edit</code>","position":{"start":{"line":31,"column":90,"offset":936},"end":{"line":31,"column":96,"offset":942},"indent":[]}},{"type":"text","value":" 的 Mode 。","position":{"start":{"line":31,"column":96,"offset":942},"end":{"line":31,"column":105,"offset":951},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":847},"end":{"line":31,"column":105,"offset":951},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"<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>","position":{"start":{"line":33,"column":1,"offset":953},"end":{"line":35,"column":4,"offset":993},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"此时 Graph 就支持了拖拽节点，","position":{"start":{"line":37,"column":1,"offset":995},"end":{"line":37,"column":19,"offset":1013},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">default</code>","position":{"start":{"line":37,"column":19,"offset":1013},"end":{"line":37,"column":28,"offset":1022},"indent":[]}},{"type":"text","value":" 模式下的拖拽画布 ","position":{"start":{"line":37,"column":28,"offset":1022},"end":{"line":37,"column":38,"offset":1032},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'drag-canvas'</code>","position":{"start":{"line":37,"column":38,"offset":1032},"end":{"line":37,"column":53,"offset":1047},"indent":[]}},{"type":"text","value":"、放缩画布行为 ","position":{"start":{"line":37,"column":53,"offset":1047},"end":{"line":37,"column":61,"offset":1055},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'zoom-canvas'</code>","position":{"start":{"line":37,"column":61,"offset":1055},"end":{"line":37,"column":76,"offset":1070},"indent":[]}},{"type":"text","value":" 失效。","position":{"start":{"line":37,"column":76,"offset":1070},"end":{"line":37,"column":80,"offset":1074},"indent":[]}}],"position":{"start":{"line":37,"column":1,"offset":995},"end":{"line":37,"column":80,"offset":1074},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在调用了 ","position":{"start":{"line":39,"column":1,"offset":1076},"end":{"line":39,"column":6,"offset":1081},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">setMode</code>","position":{"start":{"line":39,"column":6,"offset":1081},"end":{"line":39,"column":15,"offset":1090},"indent":[]}},{"type":"text","value":" 方法后，G6 内部进行了以下操作：","position":{"start":{"line":39,"column":15,"offset":1090},"end":{"line":39,"column":33,"offset":1108},"indent":[]}}],"position":{"start":{"line":39,"column":1,"offset":1076},"end":{"line":39,"column":33,"offset":1108},"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":1112},"end":{"line":41,"column":18,"offset":1127},"indent":[]}}],"position":{"start":{"line":41,"column":3,"offset":1112},"end":{"line":41,"column":18,"offset":1127},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":1110},"end":{"line":41,"column":18,"offset":1127},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"生成新的 Behavior ，进行事件初始化；","position":{"start":{"line":42,"column":3,"offset":1130},"end":{"line":42,"column":26,"offset":1153},"indent":[]}}],"position":{"start":{"line":42,"column":3,"offset":1130},"end":{"line":42,"column":26,"offset":1153},"indent":[]}}],"position":{"start":{"line":42,"column":1,"offset":1128},"end":{"line":42,"column":26,"offset":1153},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"绑定新的行为对应的事件监听。","position":{"start":{"line":43,"column":3,"offset":1156},"end":{"line":43,"column":17,"offset":1170},"indent":[]}}],"position":{"start":{"line":43,"column":3,"offset":1156},"end":{"line":43,"column":17,"offset":1170},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":1154},"end":{"line":43,"column":17,"offset":1170},"indent":[]}}],"position":{"start":{"line":41,"column":1,"offset":1110},"end":{"line":43,"column":17,"offset":1170},"indent":[1,1]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#编辑已有的-mode","title":null,"children":[],"data":{"hProperties":{"aria-label":"编辑已有的 mode 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":"编辑已有的 Mode","position":{"start":{"line":46,"column":4,"offset":1176},"end":{"line":46,"column":14,"offset":1186},"indent":[]}}],"position":{"start":{"line":46,"column":1,"offset":1173},"end":{"line":46,"column":14,"offset":1186},"indent":[]},"data":{"id":"编辑已有的-mode","htmlAttributes":{"id":"编辑已有的-mode"},"hProperties":{"id":"编辑已有的-mode"}}},{"type":"paragraph","children":[{"type":"text","value":"如果有已经定义好的 Behavior （","position":{"start":{"line":47,"column":1,"offset":1187},"end":{"line":47,"column":21,"offset":1207},"indent":[]}},{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"内置 Behavior","position":{"start":{"line":47,"column":22,"offset":1208},"end":{"line":47,"column":33,"offset":1219},"indent":[]}}],"position":{"start":{"line":47,"column":21,"offset":1207},"end":{"line":47,"column":53,"offset":1239},"indent":[]}},{"type":"text","value":" 或 ","position":{"start":{"line":47,"column":53,"offset":1239},"end":{"line":47,"column":56,"offset":1242},"indent":[]}},{"type":"link","title":null,"url":"../../advanced/custom-behavior","children":[{"type":"text","value":"自定义 Behavior","position":{"start":{"line":47,"column":57,"offset":1243},"end":{"line":47,"column":69,"offset":1255},"indent":[]}}],"position":{"start":{"line":47,"column":56,"offset":1242},"end":{"line":47,"column":102,"offset":1288},"indent":[]}},{"type":"text","value":"），需要把它添加到某个模式下，可以通过 ","position":{"start":{"line":47,"column":102,"offset":1288},"end":{"line":47,"column":122,"offset":1308},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.addBehaviors</code>","position":{"start":{"line":47,"column":122,"offset":1308},"end":{"line":47,"column":142,"offset":1328},"indent":[]}},{"type":"text","value":" 方法；需要从某个模式中移除一些 Behavior，可以使用 ","position":{"start":{"line":47,"column":142,"offset":1328},"end":{"line":47,"column":173,"offset":1359},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.removeBehaviors</code>","position":{"start":{"line":47,"column":173,"offset":1359},"end":{"line":47,"column":196,"offset":1382},"indent":[]}},{"type":"text","value":" 方法。如下示例：","position":{"start":{"line":47,"column":196,"offset":1382},"end":{"line":47,"column":205,"offset":1391},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1187},"end":{"line":47,"column":205,"offset":1391},"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 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>","position":{"start":{"line":48,"column":1,"offset":1392},"end":{"line":69,"column":4,"offset":1974},"indent":[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":"#相关阅读","title":null,"children":[],"data":{"hProperties":{"aria-label":"相关阅读 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":"相关阅读","position":{"start":{"line":71,"column":4,"offset":1979},"end":{"line":71,"column":8,"offset":1983},"indent":[]}}],"position":{"start":{"line":71,"column":1,"offset":1976},"end":{"line":71,"column":8,"offset":1983},"indent":[]},"data":{"id":"相关阅读","htmlAttributes":{"id":"相关阅读"},"hProperties":{"id":"相关阅读"}}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"./defaultBehavior","children":[{"type":"text","value":"内置交互行为 Behavior","position":{"start":{"line":73,"column":4,"offset":1988},"end":{"line":73,"column":19,"offset":2003},"indent":[]}}],"position":{"start":{"line":73,"column":3,"offset":1987},"end":{"line":73,"column":39,"offset":2023},"indent":[]}}],"position":{"start":{"line":73,"column":3,"offset":1987},"end":{"line":73,"column":39,"offset":2023},"indent":[]}}],"position":{"start":{"line":73,"column":1,"offset":1985},"end":{"line":73,"column":39,"offset":2023},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"link","title":null,"url":"../../advanced/custom-behavior","children":[{"type":"text","value":"自定义交互行为 Behavior","position":{"start":{"line":74,"column":4,"offset":2027},"end":{"line":74,"column":20,"offset":2043},"indent":[]}}],"position":{"start":{"line":74,"column":3,"offset":2026},"end":{"line":74,"column":53,"offset":2076},"indent":[]}}],"position":{"start":{"line":74,"column":3,"offset":2026},"end":{"line":74,"column":53,"offset":2076},"indent":[]}}],"position":{"start":{"line":74,"column":1,"offset":2024},"end":{"line":74,"column":53,"offset":2076},"indent":[]}}],"position":{"start":{"line":73,"column":1,"offset":1985},"end":{"line":74,"column":53,"offset":2076},"indent":[1]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":75,"column":1,"offset":2077}}}}