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

graph visualization frame work

{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-9eee848754df67dc316d25c81f8be752-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":"由于动画机制较为复杂，我们未在 Tutorial-案例 中增加动画。本文简单描述了 G6 中的动画，希望快速上手的用户可以跳过本文，希望深入了解的用户可参见：","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":80,"offset":80}}},{"type":"element","tagName":"a","properties":{"href":"../advanced/animation-zh"},"children":[{"type":"text","value":"基础动画","position":{"start":{"line":2,"column":81,"offset":81},"end":{"line":2,"column":85,"offset":85}}}],"position":{"start":{"line":2,"column":80,"offset":80},"end":{"line":2,"column":112,"offset":112}}},{"type":"text","value":"。","position":{"start":{"line":2,"column":112,"offset":112},"end":{"line":2,"column":113,"offset":113}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":113,"offset":113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 的动画分为两个层次：","position":{"start":{"line":4,"column":1,"offset":115},"end":{"line":4,"column":14,"offset":128}}}],"position":{"start":{"line":4,"column":1,"offset":115},"end":{"line":4,"column":14,"offset":128}}},{"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":132},"end":{"line":6,"column":21,"offset":150}}}],"position":{"start":{"line":6,"column":1,"offset":130},"end":{"line":6,"column":21,"offset":150}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"元素动画：节点和边的动画效果。","position":{"start":{"line":7,"column":3,"offset":153},"end":{"line":7,"column":18,"offset":168}}}],"position":{"start":{"line":7,"column":1,"offset":151},"end":{"line":7,"column":18,"offset":168}}},{"type":"text","value":"\n"}],"position":{"start":{"line":6,"column":1,"offset":130},"end":{"line":7,"column":18,"offset":168}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"全局动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%A8%E5%B1%80%E5%8A%A8%E7%94%BB","aria-label":"全局动画 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":"全局动画","position":{"start":{"line":9,"column":4,"offset":173},"end":{"line":9,"column":8,"offset":177}}}],"position":{"start":{"line":9,"column":1,"offset":170},"end":{"line":9,"column":8,"offset":177}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 的全局动画指通过图实例进行操作时，产生的动画效果。例如：","position":{"start":{"line":10,"column":1,"offset":178},"end":{"line":10,"column":32,"offset":209}}}],"position":{"start":{"line":10,"column":1,"offset":178},"end":{"line":10,"column":32,"offset":209}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"raw","value":"<code class=\"language-text\">graph.updateLayout(cfg)</code>","position":{"start":{"line":12,"column":3,"offset":213},"end":{"line":12,"column":28,"offset":238}}}],"position":{"start":{"line":12,"column":1,"offset":211},"end":{"line":12,"column":28,"offset":238}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"xxxx","position":{"start":{"line":13,"column":3,"offset":241},"end":{"line":13,"column":7,"offset":245}}}],"position":{"start":{"line":13,"column":1,"offset":239},"end":{"line":13,"column":7,"offset":245}}},{"type":"text","value":"\n"}],"position":{"start":{"line":12,"column":1,"offset":211},"end":{"line":13,"column":7,"offset":245}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"通过实例化图时配置 ","position":{"start":{"line":15,"column":1,"offset":247},"end":{"line":15,"column":11,"offset":257}}},{"type":"raw","value":"<code class=\"language-text\">animate: true</code>","position":{"start":{"line":15,"column":11,"offset":257},"end":{"line":15,"column":26,"offset":272}}},{"type":"text","value":"，可以达到每次进行上述操作时，动画效果变化的目的。","position":{"start":{"line":15,"column":26,"offset":272},"end":{"line":15,"column":51,"offset":297}}}],"position":{"start":{"line":15,"column":1,"offset":247},"end":{"line":15,"column":51,"offset":297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"例子"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BE%8B%E5%AD%90","aria-label":"例子 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":"例子","position":{"start":{"line":17,"column":6,"offset":304},"end":{"line":17,"column":8,"offset":306}}}],"position":{"start":{"line":17,"column":1,"offset":299},"end":{"line":17,"column":8,"offset":306}}},{"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  <span class=\"token operator\">...</span>                      <span class=\"token comment\">// 其他配置项</span>\n  animate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span>            <span class=\"token comment\">// Boolean，可选，切换布局时是否使用动画过度</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","position":{"start":{"line":18,"column":1,"offset":307},"end":{"line":23,"column":4,"offset":448}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"元素动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%83%E7%B4%A0%E5%8A%A8%E7%94%BB","aria-label":"元素动画 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":"元素动画","position":{"start":{"line":25,"column":4,"offset":453},"end":{"line":25,"column":8,"offset":457}}}],"position":{"start":{"line":25,"column":1,"offset":450},"end":{"line":25,"column":8,"offset":457}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 允许用户通过自定义节点/边的方式，给元素增加动画效果，如下：","position":{"start":{"line":26,"column":1,"offset":458},"end":{"line":26,"column":34,"offset":491}}},{"type":"raw","value":"<br />","position":{"start":{"line":26,"column":34,"offset":491},"end":{"line":26,"column":40,"offset":497}}}],"position":{"start":{"line":26,"column":1,"offset":458},"end":{"line":26,"column":40,"offset":497}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834416356-26055f95-a015-466c-93e0-99a78d550ea4.gif#align=left&display=inline&height=155&name=node-animation.gif&originHeight=202&originWidth=430&search=&size=155937&status=done&width=329","alt":"node-animation.gif"},"children":[],"position":{"start":{"line":28,"column":1,"offset":499},"end":{"line":28,"column":260,"offset":758}}}],"position":{"start":{"line":28,"column":1,"offset":499},"end":{"line":28,"column":260,"offset":758}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834416363-46245951-0657-4763-84af-e318407ef54f.gif#align=left&display=inline&height=200&name=edge-animation.gif&originHeight=377&originWidth=363&search=&size=40062&status=done&width=193","alt":"edge-animation.gif"},"children":[],"position":{"start":{"line":30,"column":1,"offset":760},"end":{"line":30,"column":259,"offset":1018}}}],"position":{"start":{"line":30,"column":1,"offset":760},"end":{"line":30,"column":259,"offset":1018}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834416382-da3fcbb2-cf76-418e-9573-9c0048aa4404.gif#align=left&display=inline&height=206&name=hover-animation.gif&originHeight=554&originWidth=556&search=&size=88448&status=done&width=207","alt":"hover-animation.gif"},"children":[],"position":{"start":{"line":32,"column":1,"offset":1020},"end":{"line":32,"column":261,"offset":1280}}}],"position":{"start":{"line":32,"column":1,"offset":1020},"end":{"line":32,"column":261,"offset":1280}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":33,"column":1,"offset":1281}}}}