@antv/g6
Version:
graph visualization frame work
1 lines • 82 kB
JSON
{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-3707292c8fb7991d858a1f60d008ca5d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"G6 封装了一系列交互方法，方便用户直接使用。本文将为 ","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":29,"offset":29},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":2,"column":31,"offset":31},"end":{"line":2,"column":41,"offset":41},"indent":[]}}],"position":{"start":{"line":2,"column":29,"offset":29},"end":{"line":2,"column":43,"offset":43},"indent":[]}},{"type":"text","value":" 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下：","position":{"start":{"line":2,"column":43,"offset":43},"end":{"line":2,"column":89,"offset":89},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":2,"column":89,"offset":89},"end":{"line":2,"column":95,"offset":95},"indent":[]}},{"type":"image","title":null,"url":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1569834387680-016c4436-88d6-4438-aec9-320c8cafc066.gif#align=left&display=inline&height=284&name=tutorial-demo-interact.gif&originHeight=438&originWidth=604&search=&size=514232&status=done&width=392","alt":"tutorial-demo-interact.gif","position":{"start":{"line":2,"column":95,"offset":95},"end":{"line":2,"column":370,"offset":370},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":370,"offset":370},"indent":[]}},{"type":"html","value":"<div style=\"text-align: center;\"> 图1 Tutorial案例的交互效果。</div>","position":{"start":{"line":3,"column":1,"offset":371},"end":{"line":3,"column":60,"offset":430},"indent":[]}},{"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":6,"column":4,"offset":436},"end":{"line":6,"column":8,"offset":440},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":433},"end":{"line":6,"column":8,"offset":440},"indent":[]},"data":{"id":"基本概念","htmlAttributes":{"id":"基本概念"},"hProperties":{"id":"基本概念"}}},{"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":7,"column":5,"offset":445},"end":{"line":7,"column":18,"offset":458},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":441},"end":{"line":7,"column":18,"offset":458},"indent":[]},"data":{"id":"交互行为-behavior","htmlAttributes":{"id":"交互行为-behavior"},"hProperties":{"id":"交互行为-behavior"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 中的交互行为。G6 ","position":{"start":{"line":8,"column":1,"offset":459},"end":{"line":8,"column":14,"offset":472},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"内置","position":{"start":{"line":8,"column":16,"offset":474},"end":{"line":8,"column":18,"offset":476},"indent":[]}}],"position":{"start":{"line":8,"column":14,"offset":472},"end":{"line":8,"column":20,"offset":478},"indent":[]}},{"type":"text","value":"了一系列交互行为，用户可以直接使用。简单地理解，就是可以一键开启这些交互行为：","position":{"start":{"line":8,"column":20,"offset":478},"end":{"line":8,"column":59,"offset":517},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":459},"end":{"line":8,"column":59,"offset":517},"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\">drag-canvas</code>","position":{"start":{"line":10,"column":3,"offset":521},"end":{"line":10,"column":16,"offset":534},"indent":[]}},{"type":"text","value":"：拖拽画布；","position":{"start":{"line":10,"column":16,"offset":534},"end":{"line":10,"column":22,"offset":540},"indent":[]}}],"position":{"start":{"line":10,"column":3,"offset":521},"end":{"line":10,"column":22,"offset":540},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":519},"end":{"line":10,"column":22,"offset":540},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"html","value":"<code class=\"language-text\">zoom-canvas</code>","position":{"start":{"line":11,"column":3,"offset":543},"end":{"line":11,"column":16,"offset":556},"indent":[]}},{"type":"text","value":"：缩放画布；","position":{"start":{"line":11,"column":16,"offset":556},"end":{"line":11,"column":22,"offset":562},"indent":[]}}],"position":{"start":{"line":11,"column":3,"offset":543},"end":{"line":11,"column":22,"offset":562},"indent":[]}}],"position":{"start":{"line":11,"column":1,"offset":541},"end":{"line":11,"column":22,"offset":562},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"... 更多详见：","position":{"start":{"line":12,"column":3,"offset":565},"end":{"line":12,"column":12,"offset":574},"indent":[]}},{"type":"link","title":null,"url":"../middle/states/defaultBehavior","children":[{"type":"text","value":"交互行为 Behavior","position":{"start":{"line":12,"column":13,"offset":575},"end":{"line":12,"column":26,"offset":588},"indent":[]}}],"position":{"start":{"line":12,"column":12,"offset":574},"end":{"line":12,"column":61,"offset":623},"indent":[]}}],"position":{"start":{"line":12,"column":3,"offset":565},"end":{"line":12,"column":61,"offset":623},"indent":[]}}],"position":{"start":{"line":12,"column":1,"offset":563},"end":{"line":12,"column":61,"offset":623},"indent":[]}}],"position":{"start":{"line":10,"column":1,"offset":519},"end":{"line":12,"column":61,"offset":623},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"如果内置行为不满足需求，G6 还允许用户进行","position":{"start":{"line":14,"column":1,"offset":625},"end":{"line":14,"column":23,"offset":647},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"自定义交互行为","position":{"start":{"line":14,"column":25,"offset":649},"end":{"line":14,"column":32,"offset":656},"indent":[]}}],"position":{"start":{"line":14,"column":23,"offset":647},"end":{"line":14,"column":34,"offset":658},"indent":[]}},{"type":"text","value":"。由于自定义交互较为复杂，入门教程中不再赘述，如有需求请参见：","position":{"start":{"line":14,"column":34,"offset":658},"end":{"line":14,"column":65,"offset":689},"indent":[]}},{"type":"link","title":null,"url":"../advanced/custom-behavior","children":[{"type":"text","value":"自定义交互行为 Behavior","position":{"start":{"line":14,"column":66,"offset":690},"end":{"line":14,"column":82,"offset":706},"indent":[]}}],"position":{"start":{"line":14,"column":65,"offset":689},"end":{"line":14,"column":112,"offset":736},"indent":[]}}],"position":{"start":{"line":14,"column":1,"offset":625},"end":{"line":14,"column":112,"offset":736},"indent":[]}},{"type":"heading","depth":3,"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":16,"column":5,"offset":742},"end":{"line":16,"column":14,"offset":751},"indent":[]}}],"position":{"start":{"line":16,"column":1,"offset":738},"end":{"line":16,"column":14,"offset":751},"indent":[]},"data":{"id":"交互管理-mode","htmlAttributes":{"id":"交互管理-mode"},"hProperties":{"id":"交互管理-mode"}}},{"type":"paragraph","children":[{"type":"text","value":"mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 ","position":{"start":{"line":17,"column":1,"offset":752},"end":{"line":17,"column":111,"offset":862},"indent":[]}},{"type":"link","title":null,"url":"../middle/states/mode","children":[{"type":"text","value":"G6 中的 mode","position":{"start":{"line":17,"column":112,"offset":863},"end":{"line":17,"column":122,"offset":873},"indent":[]}}],"position":{"start":{"line":17,"column":111,"offset":862},"end":{"line":17,"column":146,"offset":897},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":17,"column":146,"offset":897},"end":{"line":17,"column":147,"offset":898},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":752},"end":{"line":17,"column":147,"offset":898},"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":19,"column":5,"offset":904},"end":{"line":19,"column":15,"offset":914},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":900},"end":{"line":19,"column":15,"offset":914},"indent":[]},"data":{"id":"交互状态-state","htmlAttributes":{"id":"交互状态-state"},"hProperties":{"id":"交互状态-state"}}},{"type":"paragraph","children":[{"type":"link","title":null,"url":"../middle/states/state","children":[{"type":"text","value":"状态 State","position":{"start":{"line":20,"column":2,"offset":916},"end":{"line":20,"column":10,"offset":924},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":915},"end":{"line":20,"column":35,"offset":949},"indent":[]}},{"type":"text","value":" 是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 ","position":{"start":{"line":20,"column":35,"offset":949},"end":{"line":20,"column":116,"offset":1030},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click'</code>","position":{"start":{"line":20,"column":116,"offset":1030},"end":{"line":20,"column":125,"offset":1039},"indent":[]}},{"type":"text","value":" 为 ","position":{"start":{"line":20,"column":125,"offset":1039},"end":{"line":20,"column":128,"offset":1042},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":20,"column":128,"offset":1042},"end":{"line":20,"column":134,"offset":1048},"indent":[]}},{"type":"text","value":" 或 ","position":{"start":{"line":20,"column":134,"offset":1048},"end":{"line":20,"column":137,"offset":1051},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":20,"column":137,"offset":1051},"end":{"line":20,"column":144,"offset":1058},"indent":[]}},{"type":"text","value":"，并为节点设置 ","position":{"start":{"line":20,"column":144,"offset":1058},"end":{"line":20,"column":152,"offset":1066},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click'</code>","position":{"start":{"line":20,"column":152,"offset":1066},"end":{"line":20,"column":161,"offset":1075},"indent":[]}},{"type":"text","value":" 的样式为加粗节点边框。当 ","position":{"start":{"line":20,"column":161,"offset":1075},"end":{"line":20,"column":175,"offset":1089},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click'</code>","position":{"start":{"line":20,"column":175,"offset":1089},"end":{"line":20,"column":184,"offset":1098},"indent":[]}},{"type":"text","value":" 状态被切换为 ","position":{"start":{"line":20,"column":184,"offset":1098},"end":{"line":20,"column":192,"offset":1106},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":20,"column":192,"offset":1106},"end":{"line":20,"column":198,"offset":1112},"indent":[]}},{"type":"text","value":" 时，节点的边框将会被加粗，","position":{"start":{"line":20,"column":198,"offset":1112},"end":{"line":20,"column":212,"offset":1126},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'click'</code>","position":{"start":{"line":20,"column":212,"offset":1126},"end":{"line":20,"column":221,"offset":1135},"indent":[]}},{"type":"text","value":" 状态被切换为 ","position":{"start":{"line":20,"column":221,"offset":1135},"end":{"line":20,"column":229,"offset":1143},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">false</code>","position":{"start":{"line":20,"column":229,"offset":1143},"end":{"line":20,"column":236,"offset":1150},"indent":[]}},{"type":"text","value":" 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。","position":{"start":{"line":20,"column":236,"offset":1150},"end":{"line":20,"column":268,"offset":1182},"indent":[]}}],"position":{"start":{"line":20,"column":1,"offset":915},"end":{"line":20,"column":268,"offset":1182},"indent":[]}},{"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":22,"column":4,"offset":1187},"end":{"line":22,"column":8,"offset":1191},"indent":[]}}],"position":{"start":{"line":22,"column":1,"offset":1184},"end":{"line":22,"column":8,"offset":1191},"indent":[]},"data":{"id":"使用方法","htmlAttributes":{"id":"使用方法"},"hProperties":{"id":"使用方法"}}},{"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":23,"column":5,"offset":1196},"end":{"line":23,"column":19,"offset":1210},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":1192},"end":{"line":23,"column":19,"offset":1210},"indent":[]},"data":{"id":"拖拽、缩放内置的交互行为","htmlAttributes":{"id":"拖拽、缩放内置的交互行为"},"hProperties":{"id":"拖拽、缩放内置的交互行为"}}},{"type":"paragraph","children":[{"type":"text","value":"在 G6 中使用内置 behavior 的方式非常简单，只需要在图实例化时配置 ","position":{"start":{"line":24,"column":1,"offset":1211},"end":{"line":24,"column":41,"offset":1251},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":24,"column":41,"offset":1251},"end":{"line":24,"column":48,"offset":1258},"indent":[]}},{"type":"text","value":"。拖拽和缩放属于 G6 内置交互行为，修改代码如下：","position":{"start":{"line":24,"column":48,"offset":1258},"end":{"line":24,"column":74,"offset":1284},"indent":[]}}],"position":{"start":{"line":24,"column":1,"offset":1211},"end":{"line":24,"column":74,"offset":1284},"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 <span class=\"token operator\">...</span> <span class=\"token comment\">// 其他配置项</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</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 string\">'drag-node'</span> <span class=\"token punctuation\">]</span> <span class=\"token comment\">// 允许拖拽画布、放缩画布、拖拽节点</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre></div>","position":{"start":{"line":25,"column":1,"offset":1285},"end":{"line":32,"column":4,"offset":1486},"indent":[1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"除了直接使用内置交互名称外，也可以为 behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等。高阶用法参见 ","position":{"start":{"line":34,"column":1,"offset":1488},"end":{"line":34,"column":63,"offset":1550},"indent":[]}},{"type":"link","title":null,"url":"../middle/states/defaultBehavior","children":[{"type":"text","value":"内置的交互 Behavior","position":{"start":{"line":34,"column":64,"offset":1551},"end":{"line":34,"column":78,"offset":1565},"indent":[]}}],"position":{"start":{"line":34,"column":63,"offset":1550},"end":{"line":34,"column":113,"offset":1600},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":34,"column":113,"offset":1600},"end":{"line":34,"column":114,"offset":1601},"indent":[]}}],"position":{"start":{"line":34,"column":1,"offset":1488},"end":{"line":34,"column":114,"offset":1601},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"上面代码中的 ","position":{"start":{"line":36,"column":1,"offset":1603},"end":{"line":36,"column":8,"offset":1610},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">modes</code>","position":{"start":{"line":36,"column":8,"offset":1610},"end":{"line":36,"column":15,"offset":1617},"indent":[]}},{"type":"text","value":" 定义了 G6 的模式，","position":{"start":{"line":36,"column":15,"offset":1617},"end":{"line":36,"column":27,"offset":1629},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">default</code>","position":{"start":{"line":36,"column":27,"offset":1629},"end":{"line":36,"column":36,"offset":1638},"indent":[]}},{"type":"text","value":" 是默认的模式，还可以允许有其他的模式，比如：编辑模式 ","position":{"start":{"line":36,"column":36,"offset":1638},"end":{"line":36,"column":64,"offset":1666},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edit</code>","position":{"start":{"line":36,"column":64,"offset":1666},"end":{"line":36,"column":70,"offset":1672},"indent":[]}},{"type":"text","value":" 等。不同的模式，用户能进行的行为可以不同，比如默认模式能拖拽画布，编辑模式不允许拖拽画布：","position":{"start":{"line":36,"column":70,"offset":1672},"end":{"line":36,"column":116,"offset":1718},"indent":[]}}],"position":{"start":{"line":36,"column":1,"offset":1603},"end":{"line":36,"column":116,"offset":1718},"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\">// 举例解释不同模式</span>\nmodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</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 punctuation\">,</span>\n edit<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre></div>","position":{"start":{"line":37,"column":1,"offset":1719},"end":{"line":43,"column":4,"offset":1798},"indent":[1,1,1,1,1,1]}},{"type":"blockquote","children":[{"type":"paragraph","children":[{"type":"text","value":"更多关于模式、行为可以参考: ","position":{"start":{"line":44,"column":3,"offset":1801},"end":{"line":44,"column":18,"offset":1816},"indent":[]}},{"type":"linkReference","identifier":"todo: 链接","label":"TODO: 链接","referenceType":"shortcut","children":[{"type":"text","value":"TODO: 链接","position":{"start":{"line":44,"column":19,"offset":1817},"end":{"line":44,"column":27,"offset":1825},"indent":[]}}],"position":{"start":{"line":44,"column":18,"offset":1816},"end":{"line":44,"column":28,"offset":1826},"indent":[]}}],"position":{"start":{"line":44,"column":3,"offset":1801},"end":{"line":44,"column":28,"offset":1826},"indent":[]}}],"position":{"start":{"line":44,"column":1,"offset":1799},"end":{"line":44,"column":28,"offset":1826},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#hover、click-改变样式状态式交互","title":null,"children":[],"data":{"hProperties":{"aria-label":"hover、click 改变样式状态式交互 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":"Hover、Click 改变样式——状态式交互","position":{"start":{"line":47,"column":5,"offset":1833},"end":{"line":47,"column":28,"offset":1856},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":1829},"end":{"line":47,"column":28,"offset":1856},"indent":[]},"data":{"id":"hover、click-改变样式状态式交互","htmlAttributes":{"id":"hover、click-改变样式状态式交互"},"hProperties":{"id":"hover、click-改变样式状态式交互"}}},{"type":"paragraph","children":[{"type":"text","value":"有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中 ","position":{"start":{"line":49,"column":1,"offset":1858},"end":{"line":49,"column":79,"offset":1936},"indent":[]}},{"type":"link","title":null,"url":"../middle/states/state","children":[{"type":"text","value":"状态 State","position":{"start":{"line":49,"column":80,"offset":1937},"end":{"line":49,"column":88,"offset":1945},"indent":[]}}],"position":{"start":{"line":49,"column":79,"offset":1936},"end":{"line":49,"column":113,"offset":1970},"indent":[]}},{"type":"text","value":" 的概念。简单地说，是否 ","position":{"start":{"line":49,"column":113,"offset":1970},"end":{"line":49,"column":126,"offset":1983},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">hover</code>","position":{"start":{"line":49,"column":126,"offset":1983},"end":{"line":49,"column":133,"offset":1990},"indent":[]}},{"type":"text","value":" 、","position":{"start":{"line":49,"column":133,"offset":1990},"end":{"line":49,"column":135,"offset":1992},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">click</code>","position":{"start":{"line":49,"column":135,"offset":1992},"end":{"line":49,"column":142,"offset":1999},"indent":[]}},{"type":"text","value":" 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步：","position":{"start":{"line":49,"column":142,"offset":1999},"end":{"line":49,"column":214,"offset":2071},"indent":[]}}],"position":{"start":{"line":49,"column":1,"offset":1858},"end":{"line":49,"column":214,"offset":2071},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 1: 设置各状态下的元素样式；","position":{"start":{"line":51,"column":3,"offset":2075},"end":{"line":51,"column":23,"offset":2095},"indent":[]}}],"position":{"start":{"line":51,"column":3,"offset":2075},"end":{"line":51,"column":23,"offset":2095},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":2073},"end":{"line":51,"column":23,"offset":2095},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"Step 2: 监听事件并切换元素状态","position":{"start":{"line":52,"column":3,"offset":2098},"end":{"line":52,"column":22,"offset":2117},"indent":[]}}],"position":{"start":{"line":52,"column":3,"offset":2098},"end":{"line":52,"column":22,"offset":2117},"indent":[]}}],"position":{"start":{"line":52,"column":1,"offset":2096},"end":{"line":52,"column":22,"offset":2117},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":2073},"end":{"line":52,"column":22,"offset":2117},"indent":[1]}},{"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":54,"column":6,"offset":2124},"end":{"line":54,"column":17,"offset":2135},"indent":[]}}],"position":{"start":{"line":54,"column":1,"offset":2119},"end":{"line":54,"column":17,"offset":2135},"indent":[]},"data":{"id":"设置各状态下的元素样式","htmlAttributes":{"id":"设置各状态下的元素样式"},"hProperties":{"id":"设置各状态下的元素样式"}}},{"type":"paragraph","children":[{"type":"text","value":"在实例化图时，通过 ","position":{"start":{"line":55,"column":1,"offset":2136},"end":{"line":55,"column":11,"offset":2146},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">nodeStateStyles</code>","position":{"start":{"line":55,"column":11,"offset":2146},"end":{"line":55,"column":28,"offset":2163},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":55,"column":28,"offset":2163},"end":{"line":55,"column":31,"offset":2166},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edgeStateStyles</code>","position":{"start":{"line":55,"column":31,"offset":2166},"end":{"line":55,"column":48,"offset":2183},"indent":[]}},{"type":"text","value":" 两个配置项可以配置元素在不同状态下的样式。","position":{"start":{"line":55,"column":48,"offset":2183},"end":{"line":55,"column":70,"offset":2205},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":55,"column":70,"offset":2205},"end":{"line":55,"column":76,"offset":2211},"indent":[]}},{"type":"text","value":"为达到 ","position":{"start":{"line":55,"column":76,"offset":2211},"end":{"line":55,"column":80,"offset":2215},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":55,"column":82,"offset":2217},"end":{"line":55,"column":92,"offset":2227},"indent":[]}}],"position":{"start":{"line":55,"column":80,"offset":2215},"end":{"line":55,"column":94,"offset":2229},"indent":[]}},{"type":"text","value":" 中的效果：","position":{"start":{"line":55,"column":94,"offset":2229},"end":{"line":55,"column":100,"offset":2235},"indent":[]}}],"position":{"start":{"line":55,"column":1,"offset":2136},"end":{"line":55,"column":100,"offset":2235},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"鼠标 hover 节点时，该节点颜色变浅；","position":{"start":{"line":57,"column":3,"offset":2239},"end":{"line":57,"column":24,"offset":2260},"indent":[]}}],"position":{"start":{"line":57,"column":3,"offset":2239},"end":{"line":57,"column":24,"offset":2260},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":2237},"end":{"line":57,"column":24,"offset":2260},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"点击节点时，该节点边框加粗变黑；","position":{"start":{"line":58,"column":3,"offset":2263},"end":{"line":58,"column":19,"offset":2279},"indent":[]}}],"position":{"start":{"line":58,"column":3,"offset":2263},"end":{"line":58,"column":19,"offset":2279},"indent":[]}}],"position":{"start":{"line":58,"column":1,"offset":2261},"end":{"line":58,"column":19,"offset":2279},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"点击边时，该边变成蓝色。","position":{"start":{"line":59,"column":3,"offset":2282},"end":{"line":59,"column":15,"offset":2294},"indent":[]}}],"position":{"start":{"line":59,"column":3,"offset":2282},"end":{"line":59,"column":15,"offset":2294},"indent":[]}}],"position":{"start":{"line":59,"column":1,"offset":2280},"end":{"line":59,"column":15,"offset":2294},"indent":[]}}],"position":{"start":{"line":57,"column":1,"offset":2237},"end":{"line":59,"column":15,"offset":2294},"indent":[1,1]}},{"type":"paragraph","children":[{"type":"text","value":"下面代码设置了节点分别在 ","position":{"start":{"line":61,"column":1,"offset":2296},"end":{"line":61,"column":14,"offset":2309},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">hover</code>","position":{"start":{"line":61,"column":14,"offset":2309},"end":{"line":61,"column":21,"offset":2316},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":61,"column":21,"offset":2316},"end":{"line":61,"column":24,"offset":2319},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">click</code>","position":{"start":{"line":61,"column":24,"offset":2319},"end":{"line":61,"column":31,"offset":2326},"indent":[]}},{"type":"text","value":" 状态为 ","position":{"start":{"line":61,"column":31,"offset":2326},"end":{"line":61,"column":36,"offset":2331},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":61,"column":36,"offset":2331},"end":{"line":61,"column":42,"offset":2337},"indent":[]}},{"type":"text","value":" 时的样式，边在 ","position":{"start":{"line":61,"column":42,"offset":2337},"end":{"line":61,"column":51,"offset":2346},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">click</code>","position":{"start":{"line":61,"column":51,"offset":2346},"end":{"line":61,"column":58,"offset":2353},"indent":[]}},{"type":"text","value":" 状态为 ","position":{"start":{"line":61,"column":58,"offset":2353},"end":{"line":61,"column":63,"offset":2358},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">true</code>","position":{"start":{"line":61,"column":63,"offset":2358},"end":{"line":61,"column":69,"offset":2364},"indent":[]}},{"type":"text","value":" 时的样式：","position":{"start":{"line":61,"column":69,"offset":2364},"end":{"line":61,"column":75,"offset":2370},"indent":[]}}],"position":{"start":{"line":61,"column":1,"offset":2296},"end":{"line":61,"column":75,"offset":2370},"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 <span class=\"token comment\">// ... // 其他配置项</span>\n <span class=\"token comment\">// 节点不同状态下的样式集合</span>\n nodeStateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 鼠标 hover 上节点，即 hover 状态为 true 时的样式</span>\n hover<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'lightsteelblue'</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 鼠标点击节点，即 click 状态为 true 时的样式</span>\n click<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#000'</span><span class=\"token punctuation\">,</span>\n lineWidth<span class=\"token punctuation\">:</span> <span class=\"token number\">3</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 comment\">// 节点不同状态下的样式集合</span>\n edgeStateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 鼠标点击边，即 click 状态为 true 时的样式</span>\n click<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</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":62,"column":1,"offset":2371},"end":{"line":85,"column":4,"offset":2820},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"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":87,"column":6,"offset":2827},"end":{"line":87,"column":17,"offset":2838},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":2822},"end":{"line":87,"column":17,"offset":2838},"indent":[]},"data":{"id":"监听事件并切换元素状态","htmlAttributes":{"id":"监听事件并切换元素状态"},"hProperties":{"id":"监听事件并切换元素状态"}}},{"type":"paragraph","children":[{"type":"text","value":"G6 中所有元素监听都挂载在图实例上，如下代码中的 ","position":{"start":{"line":88,"column":1,"offset":2839},"end":{"line":88,"column":27,"offset":2865},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph</code>","position":{"start":{"line":88,"column":27,"offset":2865},"end":{"line":88,"column":34,"offset":2872},"indent":[]}},{"type":"text","value":" 对象是 G6.Graph 的实例，","position":{"start":{"line":88,"column":34,"offset":2872},"end":{"line":88,"column":52,"offset":2890},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.on()</code>","position":{"start":{"line":88,"column":52,"offset":2890},"end":{"line":88,"column":64,"offset":2902},"indent":[]}},{"type":"text","value":" 函数监听了某元素类型（","position":{"start":{"line":88,"column":64,"offset":2902},"end":{"line":88,"column":76,"offset":2914},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">node</code>","position":{"start":{"line":88,"column":76,"offset":2914},"end":{"line":88,"column":82,"offset":2920},"indent":[]}},{"type":"text","value":" / ","position":{"start":{"line":88,"column":82,"offset":2920},"end":{"line":88,"column":85,"offset":2923},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">edge</code>","position":{"start":{"line":88,"column":85,"offset":2923},"end":{"line":88,"column":91,"offset":2929},"indent":[]}},{"type":"text","value":"）的某种事件（","position":{"start":{"line":88,"column":91,"offset":2929},"end":{"line":88,"column":98,"offset":2936},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">click</code>","position":{"start":{"line":88,"column":98,"offset":2936},"end":{"line":88,"column":105,"offset":2943},"indent":[]}},{"type":"text","value":" / ","position":{"start":{"line":88,"column":105,"offset":2943},"end":{"line":88,"column":108,"offset":2946},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">mouseenter</code>","position":{"start":{"line":88,"column":108,"offset":2946},"end":{"line":88,"column":120,"offset":2958},"indent":[]}},{"type":"text","value":" / ","position":{"start":{"line":88,"column":120,"offset":2958},"end":{"line":88,"column":123,"offset":2961},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">mouseleave</code>","position":{"start":{"line":88,"column":123,"offset":2961},"end":{"line":88,"column":135,"offset":2973},"indent":[]}},{"type":"text","value":" / ... 所有事件参见：","position":{"start":{"line":88,"column":135,"offset":2973},"end":{"line":88,"column":149,"offset":2987},"indent":[]}},{"type":"link","title":null,"url":"../../api/Event","children":[{"type":"text","value":"Event API","position":{"start":{"line":88,"column":150,"offset":2988},"end":{"line":88,"column":159,"offset":2997},"indent":[]}}],"position":{"start":{"line":88,"column":149,"offset":2987},"end":{"line":88,"column":177,"offset":3015},"indent":[]}},{"type":"text","value":"）。","position":{"start":{"line":88,"column":177,"offset":3015},"end":{"line":88,"column":179,"offset":3017},"indent":[]}}],"position":{"start":{"line":88,"column":1,"offset":2839},"end":{"line":88,"column":179,"offset":3017},"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\">// 在图实例 graph 上监听</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'元素类型:事件名'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// do something</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":89,"column":1,"offset":3018},"end":{"line":94,"column":4,"offset":3103},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"现在，我们通过下面代码，为 ","position":{"start":{"line":96,"column":1,"offset":3105},"end":{"line":96,"column":15,"offset":3119},"indent":[]}},{"type":"strong","children":[{"type":"text","value":"Tutorial案例","position":{"start":{"line":96,"column":17,"offset":3121},"end":{"line":96,"column":27,"offset":3131},"indent":[]}}],"position":{"start":{"line":96,"column":15,"offset":3119},"end":{"line":96,"column":29,"offset":3133},"indent":[]}},{"type":"text","value":" 增加点和边上的监听事件，并在监听函数里使用 ","position":{"start":{"line":96,"column":29,"offset":3133},"end":{"line":96,"column":52,"offset":3156},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">graph.setItemState()</code>","position":{"start":{"line":96,"column":52,"offset":3156},"end":{"line":96,"column":74,"offset":3178},"indent":[]}},{"type":"text","value":" 改变元素的状态：","position":{"start":{"line":96,"column":74,"offset":3178},"end":{"line":96,"column":83,"offset":3187},"indent":[]}}],"position":{"start":{"line":96,"column":1,"offset":3105},"end":{"line":96,"column":83,"offset":3187},"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\">// 鼠标进入节点</span>\ngraph<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\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> nodeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span> <span class=\"token comment\">// 获取鼠标进入的节点元素对象</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>nodeItem<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> <span class=\"token comment\">// 设置当前节点的 hover 状态为 true</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 鼠标离开节点</span>\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\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> nodeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span> <span class=\"token comment\">// 获取鼠标离开的节点元素对象</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>nodeItem<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> <span class=\"token comment\">// 设置当前节点的 hover 状态为 false</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 点击节点</span>\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\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 先将所有当前是 click 状态的节点置为非 click 状态</span>\n <span class=\"token keyword\">const</span> clickNodes <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAllByState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n clickNodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cn</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>cn<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</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 <span class=\"token keyword\">const</span> nodeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span> <span class=\"token comment\">// 获取被点击的节点元素对象</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>nodeItem<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 设置当前节点的 click 状态为 true</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 点击边</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge:click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 先将所有当前是 click 状态的边置为非 click 状态</span>\n <span class=\"token keyword\">const</span> clickEdges <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAllByState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n clickEdges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ce</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>ce<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</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 <span class=\"token keyword\">const</span> edgeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span> <span class=\"token comment\">// 获取被点击的边元素对象</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edgeItem<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// 设置当前边的 click 状态为 true</span>\n <span class=\"token punctuation\">}</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></code></pre></div>","position":{"start":{"line":97,"column":1,"offset":3188},"end":{"line":132,"column":4,"offset":4227},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,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":134,"column":4,"offset":4232},"end":{"line":134,"column":8,"offset":4236},"indent":[]}}],"position":{"start":{"line":134,"column":1,"offset":4229},"end":{"line":134,"column":8,"offset":4236},"indent":[]},"data":{"id":"完整代码","htmlAttributes":{"id":"完整代码"},"hProperties":{"id":"完整代码"}}},{"type":"paragraph","children":[{"type":"text","value":"至此，完整代码如下：","position":{"start":{"line":135,"column":1,"offset":4237},"end":{"line":135,"column":11,"offset":4247},"indent":[]}}],"position":{"start":{"line":135,"column":1,"offset":4237},"end":{"line":135,"column":11,"offset":4247},"indent":[]}},{"type":"html","lang":"html","meta":null,"value":"<div class=\"gatsby-highlight\" data-language=\"html\"><pre class=\"language-html\"><code class=\"language-html\"><span class=\"token doctype\"><!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>en<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>head</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>title</span><span class=\"token punctuation\">></span></span>Tutorial Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>title</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>head</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>mountNode<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>script</span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n <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 <span class=\"token comment\">// 节点默认配置</span>\n defaultNode<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'#fff'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 边默认配置</span>\n defaultEdge<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n labelCfg<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n autoRotate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 节点在各状态下的样式</span>\n nodeStateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// hover 状态为 true 时的样式</span>\n hover<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n fill<span class=\"token punctuation\">:</span> <span class=\"token string\">'lightsteelblue'</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// click 状态为 true 时的样式</span>\n click<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#000'</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><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 边在各状态下的样式</span>\n edgeStateStyles<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// click 状态为 true 时的样式</span>\n click<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'steelblue'</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 布局</span>\n layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">'force'</span><span class=\"token punctuation\">,</span>\n linkDistance<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span>\n preventOverlap<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n nodeStrength<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">30</span><span class=\"token punctuation\">,</span>\n edgeStrength<span class=\"token punctuation\">:</span> <span class=\"token number\">0.1</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token comment\">// 内置交互</span>\n modes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</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 string\">'drag-node'</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\n <span class=\"token keyword\">const</span> <span class=\"token function-variable function\">main</span> <span class=\"token operator\">=</span> <span class=\"token keyword\">async</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> response <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> <span class=\"token function\">fetch</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</span>\n <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> remoteData <span class=\"token operator\">=</span> <span class=\"token keyword\">await</span> response<span class=\"token punctuation\">.</span><span class=\"token function\">json</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n \n <span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> remoteData<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">;</span>\n nodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">node</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>lineWidth <span class=\"token operator\">=</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>stroke <span class=\"token operator\">=</span> <span class=\"token string\">'#666'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>fill <span class=\"token operator\">=</span> <span class=\"token string\">'steelblue'</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">switch</span> <span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span>class<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">case</span> <span class=\"token string\">'c0'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token number\">30</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">case</span> <span class=\"token string\">'c1'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">35</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token keyword\">case</span> <span class=\"token string\">'c2'</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>shape <span class=\"token operator\">=</span> <span class=\"token string\">'ellipse'</span><span class=\"token punctuation\">;</span>\n node<span class=\"token punctuation\">.</span>size <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span> <span class=\"token number\">35</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span> <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n <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 edges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span>edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n edge<span class=\"token punctuation\">.</span>style <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>lineWidth <span class=\"token operator\">=</span> edge<span class=\"token punctuation\">.</span>weight<span class=\"token punctuation\">;</span>\n edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>opacity <span class=\"token operator\">=</span> <span class=\"token number\">0.6</span><span class=\"token punctuation\">;</span>\n edge<span class=\"token punctuation\">.</span>style<span class=\"token punctuation\">.</span>stroke <span class=\"token operator\">=</span> <span class=\"token string\">'grey'</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>remoteData<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token comment\">// 监听鼠标进入节点</span>\n 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\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> nodeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 设置目标节点的 hover 状态 为 true</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>nodeItem<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 <span class=\"token comment\">// 监听鼠标离开节点</span>\n graph<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\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> nodeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 设置目标节点的 hover 状态 false</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>nodeItem<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 <span class=\"token comment\">// 监听鼠标点击节点</span>\n graph<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\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 先将所有当前有 click 状态的节点的 click 状态置为 false</span>\n <span class=\"token keyword\">const</span> clickNodes <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAllByState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n clickNodes<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">cn</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>cn<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</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 <span class=\"token keyword\">const</span> nodeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 设置目标节点的 click 状态 为 true</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>nodeItem<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</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 <span class=\"token comment\">// 监听鼠标点击节点</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge:click'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// 先将所有当前有 click 状态的边的 click 状态置为 false</span>\n <span class=\"token keyword\">const</span> clickEdges <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAllByState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'edge'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n clickEdges<span class=\"token punctuation\">.</span><span class=\"token function\">forEach</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ce</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>ce<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</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 <span class=\"token keyword\">const</span> edgeItem <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">;</span>\n <span class=\"token comment\">// 设置目标边的 click 状态 为 true</span>\n graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span>edgeItem<span class=\"token punctuation\">,</span> <span class=\"token string\">'click'</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 <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token function\">main</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>script</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>html</span><span class=\"token punctuation\">></span></span></code></pre></div>","position":{"start":{"line":136,"column":1,"offset":4248},"end":{"line":282,"column":4,"offset":7925},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,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":" 注意 ","position":{"start":{"line":284,"column":1,"offset":7927},"end":{"line":284,"column":5,"offset":7931},"indent":[]}},{"type":"html","value":"<br />","position":{"start":{"line":284,"column":5,"offset":7931},"end":{"line":284,"column":11,"offset":7937},"indent":[]}},{"type":"text","value":"若需更换数据，请替换 ","position":{"start":{"line":284,"column":11,"offset":7937},"end":{"line":284,"column":22,"offset":7948},"indent":[]}},{"type":"html","value":"<code class=\"language-text\">'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'</code>","position":{"start":{"line":284,"column":22,"offset":7948},"end":{"line":284,"column":113,"offset":8039},"indent":[]}},{"type":"text","value":" 为新的数据文件地址。","position":{"start":{"line":284,"column":113,"offset":8039},"end":{"line":284,"column":124,"offset":8050},"indent":[]}}],"position":{"start":{"line":284,"column":1,"offset":7927},"end":{"line":284,"column":124,"offset":8050},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":285,"column":1,"offset":8051}}}}