@antv/g6/.cache/caches/gatsby-transformer-remark/diskstore-a96670a72a265036a8763a1b5a521fcf.json

graph visualization frame work

{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-db1908e8fbd0bd339da6a67b133a65f6-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":"除了 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":4,"offset":4}}},{"type":"element","tagName":"a","properties":{"href":"./defaultBehavior"},"children":[{"type":"text","value":"内置交互行为 Behavior","position":{"start":{"line":2,"column":5,"offset":5},"end":{"line":2,"column":20,"offset":20}}}],"position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":40,"offset":40}}},{"type":"text","value":" 和 ","position":{"start":{"line":2,"column":40,"offset":40},"end":{"line":2,"column":43,"offset":43}}},{"type":"element","tagName":"a","properties":{"href":"./mode"},"children":[{"type":"text","value":"交互模式 Mode","position":{"start":{"line":2,"column":44,"offset":44},"end":{"line":2,"column":53,"offset":53}}}],"position":{"start":{"line":2,"column":43,"offset":43},"end":{"line":2,"column":62,"offset":62}}},{"type":"text","value":" 搭配的事件管理方式外，G6 提供了直接的单个事件、时机的监听方法，可以监听画布、节点、边、以及各函数被调用的时机等。这些事件可以分为以下四个层次：","position":{"start":{"line":2,"column":62,"offset":62},"end":{"line":2,"column":136,"offset":136}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":136,"offset":136}}},{"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":4,"column":3,"offset":140},"end":{"line":4,"column":14,"offset":151}}},{"type":"raw","value":"<code class=\"language-text\">mousedown</code>","position":{"start":{"line":4,"column":14,"offset":151},"end":{"line":4,"column":25,"offset":162}}},{"type":"text","value":"， ","position":{"start":{"line":4,"column":25,"offset":162},"end":{"line":4,"column":27,"offset":164}}},{"type":"raw","value":"<code class=\"language-text\">mouseup</code>","position":{"start":{"line":4,"column":27,"offset":164},"end":{"line":4,"column":36,"offset":173}}},{"type":"text","value":"，","position":{"start":{"line":4,"column":36,"offset":173},"end":{"line":4,"column":37,"offset":174}}},{"type":"raw","value":"<code class=\"language-text\">click</code>","position":{"start":{"line":4,"column":37,"offset":174},"end":{"line":4,"column":44,"offset":181}}},{"type":"text","value":"，","position":{"start":{"line":4,"column":44,"offset":181},"end":{"line":4,"column":45,"offset":182}}},{"type":"raw","value":"<code class=\"language-text\">mouseenter</code>","position":{"start":{"line":4,"column":45,"offset":182},"end":{"line":4,"column":57,"offset":194}}},{"type":"text","value":"，","position":{"start":{"line":4,"column":57,"offset":194},"end":{"line":4,"column":58,"offset":195}}},{"type":"raw","value":"<code class=\"language-text\">mouseleave</code>","position":{"start":{"line":4,"column":58,"offset":195},"end":{"line":4,"column":70,"offset":207}}},{"type":"text","value":" 等；","position":{"start":{"line":4,"column":70,"offset":207},"end":{"line":4,"column":73,"offset":210}}}],"position":{"start":{"line":4,"column":1,"offset":138},"end":{"line":4,"column":73,"offset":210}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"节点/边 上的事件，","position":{"start":{"line":5,"column":3,"offset":213},"end":{"line":5,"column":13,"offset":223}}},{"type":"raw","value":"<code class=\"language-text\">node:mousedown</code>","position":{"start":{"line":5,"column":13,"offset":223},"end":{"line":5,"column":29,"offset":239}}},{"type":"text","value":"， ","position":{"start":{"line":5,"column":29,"offset":239},"end":{"line":5,"column":31,"offset":241}}},{"type":"raw","value":"<code class=\"language-text\">edge:click</code>","position":{"start":{"line":5,"column":31,"offset":241},"end":{"line":5,"column":43,"offset":253}}},{"type":"text","value":" 等，以 ","position":{"start":{"line":5,"column":43,"offset":253},"end":{"line":5,"column":48,"offset":258}}},{"type":"raw","value":"<code class=\"language-text\">type:eventName</code>","position":{"start":{"line":5,"column":48,"offset":258},"end":{"line":5,"column":64,"offset":274}}},{"type":"text","value":" 为事件名称；","position":{"start":{"line":5,"column":64,"offset":274},"end":{"line":5,"column":71,"offset":281}}}],"position":{"start":{"line":5,"column":1,"offset":211},"end":{"line":5,"column":71,"offset":281}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"时机事件：","position":{"start":{"line":6,"column":3,"offset":284},"end":{"line":6,"column":8,"offset":289}}}],"position":{"start":{"line":6,"column":3,"offset":284},"end":{"line":6,"column":8,"offset":289}}},{"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":7,"column":5,"offset":294},"end":{"line":7,"column":21,"offset":310}}},{"type":"raw","value":"<code class=\"language-text\">beforeadditem</code>","position":{"start":{"line":7,"column":21,"offset":310},"end":{"line":7,"column":36,"offset":325}}},{"type":"text","value":" ， ","position":{"start":{"line":7,"column":36,"offset":325},"end":{"line":7,"column":39,"offset":328}}},{"type":"raw","value":"<code class=\"language-text\">afteradditem</code>","position":{"start":{"line":7,"column":39,"offset":328},"end":{"line":7,"column":53,"offset":342}}},{"type":"text","value":" 等；","position":{"start":{"line":7,"column":53,"offset":342},"end":{"line":7,"column":56,"offset":345}}}],"position":{"start":{"line":7,"column":3,"offset":292},"end":{"line":7,"column":56,"offset":345}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"节点/边状态改变时的事件，例如：","position":{"start":{"line":8,"column":5,"offset":350},"end":{"line":8,"column":21,"offset":366}}},{"type":"raw","value":"<code class=\"language-text\">beforerefreshitem</code>","position":{"start":{"line":8,"column":21,"offset":366},"end":{"line":8,"column":40,"offset":385}}},{"type":"text","value":"，","position":{"start":{"line":8,"column":40,"offset":385},"end":{"line":8,"column":41,"offset":386}}},{"type":"raw","value":"<code class=\"language-text\">afterrefreshitem</code>","position":{"start":{"line":8,"column":41,"offset":386},"end":{"line":8,"column":59,"offset":404}}},{"type":"text","value":"。","position":{"start":{"line":8,"column":59,"offset":404},"end":{"line":8,"column":60,"offset":405}}}],"position":{"start":{"line":8,"column":3,"offset":348},"end":{"line":8,"column":60,"offset":405}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"布局时机，例如：","position":{"start":{"line":9,"column":5,"offset":410},"end":{"line":9,"column":13,"offset":418}}},{"type":"raw","value":"<code class=\"language-text\">beforelayout</code>","position":{"start":{"line":9,"column":13,"offset":418},"end":{"line":9,"column":27,"offset":432}}},{"type":"text","value":"，","position":{"start":{"line":9,"column":27,"offset":432},"end":{"line":9,"column":28,"offset":433}}},{"type":"raw","value":"<code class=\"language-text\">afterlayout</code>","position":{"start":{"line":9,"column":28,"offset":433},"end":{"line":9,"column":41,"offset":446}}},{"type":"text","value":"。","position":{"start":{"line":9,"column":41,"offset":446},"end":{"line":9,"column":42,"offset":447}}}],"position":{"start":{"line":9,"column":3,"offset":408},"end":{"line":9,"column":42,"offset":447}}},{"type":"text","value":"\n"}],"position":{"start":{"line":7,"column":3,"offset":292},"end":{"line":9,"column":42,"offset":447}}},{"type":"text","value":"\n"}],"position":{"start":{"line":6,"column":1,"offset":282},"end":{"line":9,"column":42,"offset":447}}},{"type":"text","value":"\n"}],"position":{"start":{"line":4,"column":1,"offset":138},"end":{"line":9,"column":42,"offset":447}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"如果要了解G6支持的所有事件，请参考","position":{"start":{"line":11,"column":1,"offset":449},"end":{"line":11,"column":19,"offset":467}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/event-api","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Event文档","position":{"start":{"line":11,"column":20,"offset":468},"end":{"line":11,"column":27,"offset":475}}}],"position":{"start":{"line":11,"column":19,"offset":467},"end":{"line":11,"column":69,"offset":517}}},{"type":"text","value":"。","position":{"start":{"line":11,"column":69,"offset":517},"end":{"line":11,"column":70,"offset":518}}}],"position":{"start":{"line":11,"column":1,"offset":449},"end":{"line":11,"column":70,"offset":518}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 上所有的事件都需要在graph上监听。","position":{"start":{"line":13,"column":1,"offset":520},"end":{"line":13,"column":23,"offset":542}}}],"position":{"start":{"line":13,"column":1,"offset":520},"end":{"line":13,"column":23,"offset":542}}},{"type":"text","value":"\n"},{"type":"raw","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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> ev<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 punctuation\">{</span>\n    <span class=\"token keyword\">const</span> type <span class=\"token operator\">=</span> item<span class=\"token punctuation\">.</span><span class=\"token function\">getType</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><span class=\"token punctuation\">;</span>\n\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">ev</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> shape <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>target<span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> ev<span class=\"token punctuation\">.</span>item<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":14,"column":1,"offset":543},"end":{"line":27,"column":4,"offset":778}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":28,"column":1,"offset":779}}}}