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

graph visualization frame work

{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-9eee848754df67dc316d25c81f8be752-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"由于动画机制较为复杂，我们未在 Tutorial-案例 中增加动画。本文简单描述了 G6 中的动画，希望快速上手的用户可以跳过本文，希望深入了解的用户可参见：","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":80,"offset":80},"indent":[]}},{"type":"link","title":null,"url":"../advanced/animation-zh","children":[{"type":"text","value":"基础动画","position":{"start":{"line":2,"column":81,"offset":81},"end":{"line":2,"column":85,"offset":85},"indent":[]}}],"position":{"start":{"line":2,"column":80,"offset":80},"end":{"line":2,"column":112,"offset":112},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":2,"column":112,"offset":112},"end":{"line":2,"column":113,"offset":113},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":113,"offset":113},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"G6 的动画分为两个层次：","position":{"start":{"line":4,"column":1,"offset":115},"end":{"line":4,"column":14,"offset":128},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":115},"end":{"line":4,"column":14,"offset":128},"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":132},"end":{"line":6,"column":21,"offset":150},"indent":[]}}],"position":{"start":{"line":6,"column":3,"offset":132},"end":{"line":6,"column":21,"offset":150},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":130},"end":{"line":6,"column":21,"offset":150},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"元素动画：节点和边的动画效果。","position":{"start":{"line":7,"column":3,"offset":153},"end":{"line":7,"column":18,"offset":168},"indent":[]}}],"position":{"start":{"line":7,"column":3,"offset":153},"end":{"line":7,"column":18,"offset":168},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":151},"end":{"line":7,"column":18,"offset":168},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":130},"end":{"line":7,"column":18,"offset":168},"indent":[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":9,"column":4,"offset":173},"end":{"line":9,"column":8,"offset":177},"indent":[]}}],"position":{"start":{"line":9,"column":1,"offset":170},"end":{"line":9,"column":8,"offset":177},"indent":[]},"data":{"id":"全局动画","htmlAttributes":{"id":"全局动画"},"hProperties":{"id":"全局动画"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 的全局动画指通过图实例进行操作时，产生的动画效果。例如：","position":{"start":{"line":10,"column":1,"offset":178},"end":{"line":10,"column":32,"offset":209},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":178},"end":{"line":10,"column":32,"offset":209},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">graph.updateLayout(cfg)</code>","position":{"start":{"line":12,"column":3,"offset":213},"end":{"line":12,"column":28,"offset":238},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":213},"end":{"line":12,"column":28,"offset":238},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":211},"end":{"line":12,"column":28,"offset":238},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"xxxx","position":{"start":{"line":13,"column":3,"offset":241},"end":{"line":13,"column":7,"offset":245},"indent":[]}}],"position":{"start":{"line":13,"column":3,"offset":241},"end":{"line":13,"column":7,"offset":245},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":239},"end":{"line":13,"column":7,"offset":245},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":211},"end":{"line":13,"column":7,"offset":245},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"通过实例化图时配置 ","position":{"start":{"line":15,"column":1,"offset":247},"end":{"line":15,"column":11,"offset":257},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">animate: true</code>","position":{"start":{"line":15,"column":11,"offset":257},"end":{"line":15,"column":26,"offset":272},"indent":[]}},{"type":"text","value":"，可以达到每次进行上述操作时，动画效果变化的目的。","position":{"start":{"line":15,"column":26,"offset":272},"end":{"line":15,"column":51,"offset":297},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":247},"end":{"line":15,"column":51,"offset":297},"indent":[]}},{"type":"heading","depth":4,"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":17,"column":6,"offset":304},"end":{"line":17,"column":8,"offset":306},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":299},"end":{"line":17,"column":8,"offset":306},"indent":[]},"data":{"id":"例子","htmlAttributes":{"id":"例子"},"hProperties":{"id":"例子"}}},{"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  <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},"indent":[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":25,"column":4,"offset":453},"end":{"line":25,"column":8,"offset":457},"indent":[]}}],"position":{"start":{"line":25,"column":1,"offset":450},"end":{"line":25,"column":8,"offset":457},"indent":[]},"data":{"id":"元素动画","htmlAttributes":{"id":"元素动画"},"hProperties":{"id":"元素动画"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 允许用户通过自定义节点/边的方式，给元素增加动画效果，如下：","position":{"start":{"line":26,"column":1,"offset":458},"end":{"line":26,"column":34,"offset":491},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":26,"column":34,"offset":491},"end":{"line":26,"column":40,"offset":497},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":458},"end":{"line":26,"column":40,"offset":497},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":28,"column":1,"offset":499},"end":{"line":28,"column":260,"offset":758},"indent":[]}}],"position":{"start":{"line":28,"column":1,"offset":499},"end":{"line":28,"column":260,"offset":758},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":30,"column":1,"offset":760},"end":{"line":30,"column":259,"offset":1018},"indent":[]}}],"position":{"start":{"line":30,"column":1,"offset":760},"end":{"line":30,"column":259,"offset":1018},"indent":[]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"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","position":{"start":{"line":32,"column":1,"offset":1020},"end":{"line":32,"column":261,"offset":1280},"indent":[]}}],"position":{"start":{"line":32,"column":1,"offset":1020},"end":{"line":32,"column":261,"offset":1280},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":33,"column":1,"offset":1281}}}}