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

graph visualization frame work

{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-7e3bb971ca0c3fe177b45a5aa80db81f-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":"#什么是-state","title":null,"children":[],"data":{"hProperties":{"aria-label":"什么是 state 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":"什么是 state","position":{"start":{"line":2,"column":4,"offset":4},"end":{"line":2,"column":13,"offset":13},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":13,"offset":13},"indent":[]},"data":{"id":"什么是-state","htmlAttributes":{"id":"什么是-state"},"hProperties":{"id":"什么是-state"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 中的 ","position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":7,"offset":20},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"state","position":{"start":{"line":3,"column":9,"offset":22},"end":{"line":3,"column":14,"offset":27},"indent":[]}}],"position":{"start":{"line":3,"column":7,"offset":20},"end":{"line":3,"column":16,"offset":29},"indent":[]}},{"type":"text","value":"，指的是状态，包括","position":{"start":{"line":3,"column":16,"offset":29},"end":{"line":3,"column":25,"offset":38},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"交互状态","position":{"start":{"line":3,"column":27,"offset":40},"end":{"line":3,"column":31,"offset":44},"indent":[]}}],"position":{"start":{"line":3,"column":25,"offset":38},"end":{"line":3,"column":33,"offset":46},"indent":[]}},{"type":"text","value":"和","position":{"start":{"line":3,"column":33,"offset":46},"end":{"line":3,"column":34,"offset":47},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"业务状态","position":{"start":{"line":3,"column":36,"offset":49},"end":{"line":3,"column":40,"offset":53},"indent":[]}}],"position":{"start":{"line":3,"column":34,"offset":47},"end":{"line":3,"column":42,"offset":55},"indent":[]}},{"type":"text","value":"两种。","position":{"start":{"line":3,"column":42,"offset":55},"end":{"line":3,"column":45,"offset":58},"indent":[]}}],"position":{"start":{"line":3,"column":1,"offset":14},"end":{"line":3,"column":45,"offset":58},"indent":[]}},{"type":"heading","depth":3,"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":5,"column":5,"offset":64},"end":{"line":5,"column":9,"offset":68},"indent":[]}}],"position":{"start":{"line":5,"column":1,"offset":60},"end":{"line":5,"column":9,"offset":68},"indent":[]},"data":{"id":"交互状态","htmlAttributes":{"id":"交互状态"},"hProperties":{"id":"交互状态"}}},{"type":"paragraph","children":[{"type":"text","value":"交互状态是与具体的交互动作密切相关的，如用户使用鼠标选中某个节点，hover 到某条边。","position":{"start":{"line":6,"column":1,"offset":69},"end":{"line":6,"column":45,"offset":113},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":69},"end":{"line":6,"column":45,"offset":113},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"G6 中默认处理的是交互状态。","position":{"start":{"line":8,"column":1,"offset":115},"end":{"line":8,"column":16,"offset":130},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":115},"end":{"line":8,"column":16,"offset":130},"indent":[]}},{"type":"heading","depth":3,"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":10,"column":5,"offset":136},"end":{"line":10,"column":9,"offset":140},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":132},"end":{"line":10,"column":9,"offset":140},"indent":[]},"data":{"id":"业务状态","htmlAttributes":{"id":"业务状态"},"hProperties":{"id":"业务状态"}}},{"type":"paragraph","children":[{"type":"text","value":"指根据用户业务需求自定义的状态。业务状态是与交互动作无关的，与具体业务逻辑强相关的，也可理解为是强数据驱动的。如某个任务的执行状态、某条申请的审批状态等，不同的数据值代表不同的业务状态。业务状态与用户交互动作无关，但在 G6 中的处理方式同交互状态一致。","position":{"start":{"line":11,"column":1,"offset":141},"end":{"line":11,"column":128,"offset":268},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":141},"end":{"line":11,"column":128,"offset":268},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#何时使用-state","title":null,"children":[],"data":{"hProperties":{"aria-label":"何时使用 state 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":"何时使用 state","position":{"start":{"line":13,"column":4,"offset":273},"end":{"line":13,"column":14,"offset":283},"indent":[]}}],"position":{"start":{"line":13,"column":1,"offset":270},"end":{"line":13,"column":14,"offset":283},"indent":[]},"data":{"id":"何时使用-state","htmlAttributes":{"id":"何时使用-state"},"hProperties":{"id":"何时使用-state"}}},{"type":"paragraph","children":[{"type":"text","value":"判断是否该使用 state 的原则很简单，从交互和业务两个层面来看：","position":{"start":{"line":14,"column":1,"offset":284},"end":{"line":14,"column":35,"offset":318},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":284},"end":{"line":14,"column":35,"offset":318},"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":16,"column":3,"offset":322},"end":{"line":16,"column":23,"offset":342},"indent":[]}}],"position":{"start":{"line":16,"column":3,"offset":322},"end":{"line":16,"column":23,"offset":342},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":320},"end":{"line":16,"column":23,"offset":342},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"呈现给用户的内容会根据数据改变（如 1 代表成功，0 代表失败）。","position":{"start":{"line":17,"column":3,"offset":345},"end":{"line":17,"column":36,"offset":378},"indent":[]}}],"position":{"start":{"line":17,"column":3,"offset":345},"end":{"line":17,"column":36,"offset":378},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":343},"end":{"line":17,"column":36,"offset":378},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":320},"end":{"line":17,"column":36,"offset":378},"indent":[1]}},{"type":"paragraph","children":[{"type":"text","value":"满足上述条件其一，则应该使用 state。","position":{"start":{"line":19,"column":1,"offset":380},"end":{"line":19,"column":22,"offset":401},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":380},"end":{"line":19,"column":22,"offset":401},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#配置不同-state-的样式","title":null,"children":[],"data":{"hProperties":{"aria-label":"配置不同 state 的样式 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":"配置不同 state 的样式","position":{"start":{"line":21,"column":4,"offset":406},"end":{"line":21,"column":18,"offset":420},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":403},"end":{"line":21,"column":18,"offset":420},"indent":[]},"data":{"id":"配置不同-state-的样式","htmlAttributes":{"id":"配置不同-state-的样式"},"hProperties":{"id":"配置不同-state-的样式"}}},{"type":"paragraph","children":[{"type":"text","value":"在 G6 中，配置交互状态和业务状态的方式是相同的。对于部分只使用 G6 来完成某个需求的开发，而不想深入理解G6的用户，其实不用区分交互状态和业务状态的区别，使用相同的方式定义状态，使用相同的方式使用状态，完全没有理解成本。","position":{"start":{"line":22,"column":1,"offset":421},"end":{"line":22,"column":114,"offset":534},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":421},"end":{"line":22,"column":114,"offset":534},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"在 G6 中，定义 state 时，我们有两种选择：","position":{"start":{"line":24,"column":1,"offset":536},"end":{"line":24,"column":27,"offset":562},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":536},"end":{"line":24,"column":27,"offset":562},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"在实例化 Graph 时，通过 ","position":{"start":{"line":26,"column":3,"offset":566},"end":{"line":26,"column":19,"offset":582},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">nodeStateStyles</code>","position":{"start":{"line":26,"column":19,"offset":582},"end":{"line":26,"column":36,"offset":599},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":26,"column":36,"offset":599},"end":{"line":26,"column":39,"offset":602},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edgeStateStyles</code>","position":{"start":{"line":26,"column":39,"offset":602},"end":{"line":26,"column":56,"offset":619},"indent":[]}},{"type":"text","value":" 来定义；","position":{"start":{"line":26,"column":56,"offset":619},"end":{"line":26,"column":61,"offset":624},"indent":[]}}],"position":{"start":{"line":26,"column":3,"offset":566},"end":{"line":26,"column":61,"offset":624},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":564},"end":{"line":26,"column":61,"offset":624},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"在自定义节点时，在 options 配置项的 ","position":{"start":{"line":27,"column":3,"offset":627},"end":{"line":27,"column":26,"offset":650},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">stateStyles</code>","position":{"start":{"line":27,"column":26,"offset":650},"end":{"line":27,"column":39,"offset":663},"indent":[]}},{"type":"text","value":" 中定义状态。","position":{"start":{"line":27,"column":39,"offset":663},"end":{"line":27,"column":46,"offset":670},"indent":[]}}],"position":{"start":{"line":27,"column":3,"offset":627},"end":{"line":27,"column":46,"offset":670},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":625},"end":{"line":27,"column":46,"offset":670},"indent":[]}}],"position":{"start":{"line":26,"column":1,"offset":564},"end":{"line":27,"column":46,"offset":670},"indent":[1]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#实例化-graph-时定义-state-样式","title":null,"children":[],"data":{"hProperties":{"aria-label":"实例化 graph 时定义 state 样式 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":"实例化 Graph 时定义 state 样式","position":{"start":{"line":29,"column":5,"offset":676},"end":{"line":29,"column":27,"offset":698},"indent":[]}}],"position":{"start":{"line":29,"column":1,"offset":672},"end":{"line":29,"column":27,"offset":698},"indent":[]},"data":{"id":"实例化-graph-时定义-state-样式","htmlAttributes":{"id":"实例化-graph-时定义-state-样式"},"hProperties":{"id":"实例化-graph-时定义-state-样式"}}},{"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\">800</span><span class=\"token punctuation\">,</span>\n  height<span class=\"token punctuation\">:</span> <span class=\"token number\">600</span><span class=\"token punctuation\">,</span>\n  defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'diamond'</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// 默认状态样式</span>\n      fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'blue'</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>\n  nodeStateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    hover<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// hover 状态为 true 时的样式</span>\n      fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#d3adf7'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    running<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// running 状态为 true 时的样式</span>\n      stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</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>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":30,"column":1,"offset":699},"end":{"line":50,"column":4,"offset":1099},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"上面的实例代码中，我们在实例化 Graph 时候，通过 ","position":{"start":{"line":52,"column":1,"offset":1101},"end":{"line":52,"column":29,"offset":1129},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">nodeStateStyles</code>","position":{"start":{"line":52,"column":29,"offset":1129},"end":{"line":52,"column":46,"offset":1146},"indent":[]}},{"type":"text","value":" 定义了交互状态 ","position":{"start":{"line":52,"column":46,"offset":1146},"end":{"line":52,"column":55,"offset":1155},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">hover</code>","position":{"start":{"line":52,"column":55,"offset":1155},"end":{"line":52,"column":62,"offset":1162},"indent":[]}},{"type":"text","value":" 和业务状态","position":{"start":{"line":52,"column":62,"offset":1162},"end":{"line":52,"column":68,"offset":1168},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">running</code>","position":{"start":{"line":52,"column":68,"offset":1168},"end":{"line":52,"column":77,"offset":1177},"indent":[]}},{"type":"text","value":"，当用户操作过程中，鼠标 ","position":{"start":{"line":52,"column":77,"offset":1177},"end":{"line":52,"column":90,"offset":1190},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">hover</code>","position":{"start":{"line":52,"column":90,"offset":1190},"end":{"line":52,"column":97,"offset":1197},"indent":[]}},{"type":"text","value":" 到某个节点上时，节点的填充色就会变为指定的颜色，当某个任务状态变为正在执行时，节点的边框就会变为 ","position":{"start":{"line":52,"column":97,"offset":1197},"end":{"line":52,"column":147,"offset":1247},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">running</code>","position":{"start":{"line":52,"column":147,"offset":1247},"end":{"line":52,"column":156,"offset":1256},"indent":[]}},{"type":"text","value":" 状态定义的颜色。","position":{"start":{"line":52,"column":156,"offset":1256},"end":{"line":52,"column":165,"offset":1265},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":52,"column":165,"offset":1265},"end":{"line":52,"column":171,"offset":1271},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/244306/1570584254138-c2ef66cc-0067-41bf-8235-63798c65a3c1.gif#align=left&display=inline&height=181&name=3.gif&originHeight=181&originWidth=247&search=&size=8886&status=done&width=247","alt":"3.gif","position":{"start":{"line":52,"column":171,"offset":1271},"end":{"line":52,"column":402,"offset":1502},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":1101},"end":{"line":52,"column":402,"offset":1502},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"同理，defaultEdge 中的 style 属性定义了默认状态下边的样式，使用 ","position":{"start":{"line":54,"column":1,"offset":1504},"end":{"line":54,"column":43,"offset":1546},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edgeStateStyles</code>","position":{"start":{"line":54,"column":43,"offset":1546},"end":{"line":54,"column":60,"offset":1563},"indent":[]}},{"type":"text","value":" 可以定义不同状态下边的样式。","position":{"start":{"line":54,"column":60,"offset":1563},"end":{"line":54,"column":75,"offset":1578},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":1504},"end":{"line":54,"column":75,"offset":1578},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#自定义节点和边时定义-state-样式","title":null,"children":[],"data":{"hProperties":{"aria-label":"自定义节点和边时定义 state 样式 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":"自定义节点和边时定义 state 样式","position":{"start":{"line":56,"column":5,"offset":1584},"end":{"line":56,"column":24,"offset":1603},"indent":[]}}],"position":{"start":{"line":56,"column":1,"offset":1580},"end":{"line":56,"column":24,"offset":1603},"indent":[]},"data":{"id":"自定义节点和边时定义-state-样式","htmlAttributes":{"id":"自定义节点和边时定义-state-样式"},"hProperties":{"id":"自定义节点和边时定义-state-样式"}}},{"type":"paragraph","children":[{"type":"text","value":"下面代码是在自定义节点时候通过 ","position":{"start":{"line":57,"column":1,"offset":1604},"end":{"line":57,"column":17,"offset":1620},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">stateStyles</code>","position":{"start":{"line":57,"column":17,"offset":1620},"end":{"line":57,"column":30,"offset":1633},"indent":[]}},{"type":"text","value":" 定义的交互状态 ","position":{"start":{"line":57,"column":30,"offset":1633},"end":{"line":57,"column":39,"offset":1642},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">hover</code>","position":{"start":{"line":57,"column":39,"offset":1642},"end":{"line":57,"column":46,"offset":1649},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":57,"column":46,"offset":1649},"end":{"line":57,"column":49,"offset":1652},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">selected</code>","position":{"start":{"line":57,"column":49,"offset":1652},"end":{"line":57,"column":59,"offset":1662},"indent":[]}},{"type":"text","value":"。用户在操作过程中，如果hover到某个节点，则节点的透明度会变为 0.8，如果选中某个节点，选中节点的边框宽度变为 3。","position":{"start":{"line":57,"column":59,"offset":1662},"end":{"line":57,"column":120,"offset":1723},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":1604},"end":{"line":57,"column":120,"offset":1723},"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\">registerNode</span><span class=\"token punctuation\">(</span><span class=\"token string\">'customShape'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// 自定义节点时的配置</span>\n  options<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    size<span class=\"token punctuation\">:</span> <span class=\"token number\">60</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">1</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    stateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// 鼠标hover状态下的配置</span>\n      hover<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        fillOpacity<span class=\"token punctuation\">:</span> <span class=\"token number\">0.8</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token comment\">// 选中节点状态下的配置</span>\n      selected<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":58,"column":1,"offset":1724},"end":{"line":78,"column":4,"offset":2025},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/244306/1570584254137-65f129dd-45fc-430d-9485-991ee1d2dbba.gif#align=left&display=inline&height=181&name=3.gif&originHeight=181&originWidth=247&search=&size=8385&status=done&width=247","alt":"3.gif","position":{"start":{"line":79,"column":1,"offset":2026},"end":{"line":79,"column":232,"offset":2257},"indent":[]}}],"position":{"start":{"line":79,"column":1,"offset":2026},"end":{"line":79,"column":232,"offset":2257},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#使用-state","title":null,"children":[],"data":{"hProperties":{"aria-label":"使用 state 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":"使用 state","position":{"start":{"line":81,"column":4,"offset":2262},"end":{"line":81,"column":12,"offset":2270},"indent":[]}}],"position":{"start":{"line":81,"column":1,"offset":2259},"end":{"line":81,"column":12,"offset":2270},"indent":[]},"data":{"id":"使用-state","htmlAttributes":{"id":"使用-state"},"hProperties":{"id":"使用-state"}}},{"type":"paragraph","children":[{"type":"text","value":"不管使用哪种方式，当我们定义好了 state 以后，","position":{"start":{"line":82,"column":1,"offset":2271},"end":{"line":82,"column":27,"offset":2297},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"使用 ","position":{"start":{"line":82,"column":29,"offset":2299},"end":{"line":82,"column":32,"offset":2302},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.setItemState</code>","position":{"start":{"line":82,"column":32,"offset":2302},"end":{"line":82,"column":52,"offset":2322},"indent":[]}},{"type":"text","value":" 来使定义的状态生效","position":{"start":{"line":82,"column":52,"offset":2322},"end":{"line":82,"column":62,"offset":2332},"indent":[]}}],"position":{"start":{"line":82,"column":27,"offset":2297},"end":{"line":82,"column":64,"offset":2334},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":82,"column":64,"offset":2334},"end":{"line":82,"column":65,"offset":2335},"indent":[]}}],"position":{"start":{"line":82,"column":1,"offset":2271},"end":{"line":82,"column":65,"offset":2335},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"那么，我们该在什么地方使用 ","position":{"start":{"line":84,"column":1,"offset":2337},"end":{"line":84,"column":15,"offset":2351},"indent":[]}},{"type":"strong","children":[{"type":"html","value":"<code class=\"language-text\">graph.setItemState</code>","position":{"start":{"line":84,"column":17,"offset":2353},"end":{"line":84,"column":37,"offset":2373},"indent":[]}}],"position":{"start":{"line":84,"column":15,"offset":2351},"end":{"line":84,"column":39,"offset":2375},"indent":[]}},{"type":"text","value":" 来使 state 生效呢？一种是直接使用 ","position":{"start":{"line":84,"column":39,"offset":2375},"end":{"line":84,"column":61,"offset":2397},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.on</code>","position":{"start":{"line":84,"column":61,"offset":2397},"end":{"line":84,"column":71,"offset":2407},"indent":[]}},{"type":"text","value":" 监听事件，在回调中使 state 生效，另一种是在自定义 Behavior 中使 state 生效。","position":{"start":{"line":84,"column":71,"offset":2407},"end":{"line":84,"column":122,"offset":2458},"indent":[]}}],"position":{"start":{"line":84,"column":1,"offset":2337},"end":{"line":84,"column":122,"offset":2458},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#graphon","title":null,"children":[],"data":{"hProperties":{"aria-label":"graphon 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":"graph.on","position":{"start":{"line":86,"column":5,"offset":2464},"end":{"line":86,"column":13,"offset":2472},"indent":[]}}],"position":{"start":{"line":86,"column":1,"offset":2460},"end":{"line":86,"column":13,"offset":2472},"indent":[]},"data":{"id":"graphon","htmlAttributes":{"id":"graphon"},"hProperties":{"id":"graphon"}}},{"type":"paragraph","children":[{"type":"text","value":"在回调函数中使定义的交互状态 hover 生效。","position":{"start":{"line":87,"column":1,"offset":2473},"end":{"line":87,"column":25,"offset":2497},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":2473},"end":{"line":87,"column":25,"offset":2497},"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\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node:mouseenter'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">evt</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> item <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> evt<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\">'hover'</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><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:mouseleave'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">evt</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> item <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> evt<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\">'hover'</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</code></pre></div>","position":{"start":{"line":88,"column":1,"offset":2498},"end":{"line":98,"column":4,"offset":2727},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"heading","depth":3,"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":100,"column":5,"offset":2733},"end":{"line":100,"column":13,"offset":2741},"indent":[]}}],"position":{"start":{"line":100,"column":1,"offset":2729},"end":{"line":100,"column":13,"offset":2741},"indent":[]},"data":{"id":"behavior","htmlAttributes":{"id":"behavior"},"hProperties":{"id":"behavior"}}},{"type":"paragraph","children":[{"type":"text","value":"在自定义 Behavior 中使定义的交互状态 selected 生效。","position":{"start":{"line":101,"column":1,"offset":2742},"end":{"line":101,"column":37,"offset":2778},"indent":[]}}],"position":{"start":{"line":101,"column":1,"offset":2742},"end":{"line":101,"column":37,"offset":2778},"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\">'nodeClick'</span><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\">'onClick'</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>\n  <span class=\"token function\">onClick</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    e<span class=\"token punctuation\">.</span><span class=\"token function\">preventDefault</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</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><span class=\"token function\">shouldUpdate</span><span class=\"token punctuation\">.</span><span class=\"token function\">call</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</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 keyword\">return</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> item <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> e<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    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\">'selected'</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 punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":102,"column":1,"offset":2779},"end":{"line":119,"column":4,"offset":3113},"indent":[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":121,"column":4,"offset":3118},"end":{"line":121,"column":6,"offset":3120},"indent":[]}}],"position":{"start":{"line":121,"column":1,"offset":3115},"end":{"line":121,"column":6,"offset":3120},"indent":[]},"data":{"id":"小结","htmlAttributes":{"id":"小结"},"hProperties":{"id":"小结"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 底层提供了状态管理的能力，通过使用 state，简化了状态管理，降低了用户的认知成本。更多关于 G6 中状态的内容请参考 ","position":{"start":{"line":122,"column":1,"offset":3121},"end":{"line":122,"column":65,"offset":3185},"indent":[]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/xiux28","children":[{"type":"text","value":"G6 状态量思考","position":{"start":{"line":122,"column":66,"offset":3186},"end":{"line":122,"column":74,"offset":3194},"indent":[]}}],"position":{"start":{"line":122,"column":65,"offset":3185},"end":{"line":122,"column":113,"offset":3233},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":"。","position":{"start":{"line":122,"column":113,"offset":3233},"end":{"line":122,"column":114,"offset":3234},"indent":[]}}],"position":{"start":{"line":122,"column":1,"offset":3121},"end":{"line":122,"column":114,"offset":3234},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":123,"column":1,"offset":3235}}}}