{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-7165bb01d288530982a39852a469d1bb-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":55,"offset":55}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":55,"offset":55}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销毁。","position":{"start":{"line":4,"column":1,"offset":57},"end":{"line":4,"column":36,"offset":92}}}],"position":{"start":{"line":4,"column":1,"offset":57},"end":{"line":4,"column":36,"offset":92}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"初始化"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%88%9D%E5%A7%8B%E5%8C%96","aria-label":"初始化 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"初始化","position":{"start":{"line":6,"column":4,"offset":97},"end":{"line":6,"column":7,"offset":100}}}],"position":{"start":{"line":6,"column":1,"offset":94},"end":{"line":6,"column":7,"offset":100}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"g6graph"},"children":[{"type":"element","tagName":"a","properties":{"href":"#g6graph","aria-label":"g6graph permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"G6.Graph","position":{"start":{"line":7,"column":5,"offset":105},"end":{"line":7,"column":13,"offset":113}}}],"position":{"start":{"line":7,"column":1,"offset":101},"end":{"line":7,"column":13,"offset":113}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":8,"column":3,"offset":116},"end":{"line":8,"column":5,"offset":118}}}],"position":{"start":{"line":8,"column":1,"offset":114},"end":{"line":8,"column":7,"offset":120}}},{"type":"text","value":"\n| 名称 | 类型 | 默认值 | 描述 |\n| --- | --- | --- | --- |\n| container | String|HTMLElement  | 图的 DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象 |\n| width | Number | undefined | 指定画布宽度，单位为 'px' |\n| height | Number | undefined | 指定画布高度，单位为 'px' |\n| renderer | String | canvas | 渲染引擎，支持 canvas 和 SVG。 |\n| fitView | Boolean | false | 是否开启画布自适应。开启后图自动适配画布大小。 |\n| fitViewPadding | Array | Number  | fitView 为 true 时生效。图适应画布时，指定四周的留白。","position":{"start":{"line":8,"column":7,"offset":120},"end":{"line":16,"column":72,"offset":534}}},{"type":"raw","value":"<br />","position":{"start":{"line":16,"column":72,"offset":534},"end":{"line":16,"column":78,"offset":540}}},{"type":"text","value":"- 可以是一个值, 例如：fitViewPadding: 20","position":{"start":{"line":16,"column":78,"offset":540},"end":{"line":16,"column":109,"offset":571}}},{"type":"raw","value":"<br />","position":{"start":{"line":16,"column":109,"offset":571},"end":{"line":16,"column":115,"offset":577}}},{"type":"text","value":"- 也可以是一个数组，例如：fitViewPadding: ","position":{"start":{"line":16,"column":115,"offset":577},"end":{"line":16,"column":145,"offset":607}}},{"type":"text","value":"[ 20, 40, 50, 20 ]","position":{"start":{"line":16,"column":146,"offset":608},"end":{"line":16,"column":162,"offset":624}}},{"type":"raw","value":"<br />","position":{"start":{"line":16,"column":163,"offset":625},"end":{"line":16,"column":169,"offset":631}}},{"type":"text","value":"当指定一个值时，四边的边距都相等，当指定数组时，数组内数值依次对应 上，右，下，左四边的边距。 |\n| groupByTypes | Boolean | true | 各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。 |\n| autoPaint | Boolean | true | 当图中元素更新，或视口变换时，是否自动重绘。建议在批量操作节点时关闭，以提高性能，完成批量操作后再打开，参见后面的 setAutoPaint() 方法。 |\n| modes | Object |  | 设置画布的模式。详情可见 ","position":{"start":{"line":16,"column":169,"offset":631},"end":{"line":19,"column":36,"offset":948}}},{"type":"element","tagName":"a","properties":{"href":""},"children":[{"type":"text","value":"G6 中的 Mode","position":{"start":{"line":19,"column":37,"offset":949},"end":{"line":19,"column":47,"offset":959}}}],"position":{"start":{"line":19,"column":36,"offset":948},"end":{"line":19,"column":50,"offset":962}}},{"type":"text","value":" 文档。 |\n| nodeStateStyles | Object | {} | 各个状态下节点的样式，例如hover、selected，3.1版本新增。 |\n| edgeStateStyles | Object | {} | 各个状态下边的样式，例如hover、selected，3.1版本新增。 |\n| defaultNode | Object | {} | 默认状态下节点的配置，比如 shape, size, color。会被写入的 data 覆盖。 |\n| defaultEdge | Object | {} | 默认状态下边的配置，比如 shape, size, color。会被写入的 data 覆盖。 |\n| plugins | Array | [] | 向 graph 注册插件。插件机制请见：","position":{"start":{"line":19,"column":50,"offset":962},"end":{"line":24,"column":46,"offset":1318}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/plugin","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"plugin","position":{"start":{"line":24,"column":47,"offset":1319},"end":{"line":24,"column":53,"offset":1325}}}],"position":{"start":{"line":24,"column":46,"offset":1318},"end":{"line":24,"column":92,"offset":1364}}},{"type":"text","value":" |\n| animate | Boolean | false | 是否启用全局动画。 |\n| animateCfg | Object |  | 动画配置项，仅在 animate 为 true 时有效。 |\n| animateCfg.","position":{"start":{"line":24,"column":92,"offset":1364},"end":{"line":27,"column":14,"offset":1480}}},{"type":"raw","value":"<br />","position":{"start":{"line":27,"column":14,"offset":1480},"end":{"line":27,"column":20,"offset":1486}}},{"type":"text","value":"onFrame | Function | null  | 回调函数，用于自定义节点运动路径，为空时线性运动。 |\n| animateCfg.","position":{"start":{"line":27,"column":20,"offset":1486},"end":{"line":28,"column":14,"offset":1556}}},{"type":"raw","value":"<br />","position":{"start":{"line":28,"column":14,"offset":1556},"end":{"line":28,"column":20,"offset":1562}}},{"type":"text","value":"duration | Number | 500 | 动画时长，单位为毫秒。 |\n| animateCfg.","position":{"start":{"line":28,"column":20,"offset":1562},"end":{"line":29,"column":14,"offset":1615}}},{"type":"raw","value":"<br />","position":{"start":{"line":29,"column":14,"offset":1615},"end":{"line":29,"column":20,"offset":1621}}},{"type":"text","value":"easing | String | easeLinear | 动画动效，可参见d3 ease。 |\n| minZoom | Number | 0.2 | 最小缩放比例 |\n| maxZoom | Number | 10 | 最大缩放比例 |\n| pixelRatio | Number | 1.0 | 像素比率 |\n| groupType | String | circle | 节点分组类型，支持 circle 和 rect |\n| groupStyle | Object |  | groupStyle 用于指定分组的样式，详情参看","position":{"start":{"line":29,"column":20,"offset":1621},"end":{"line":34,"column":53,"offset":1889}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/taixri#f283J","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"文档","position":{"start":{"line":34,"column":54,"offset":1890},"end":{"line":34,"column":56,"offset":1892}}}],"position":{"start":{"line":34,"column":53,"offset":1889},"end":{"line":34,"column":101,"offset":1937}}},{"type":"text","value":" |\n| layout | Object |  | 布局配置项，使用 type 字段指定使用的布局方式，type可取以下值：random, radial, mds, circular, fruchterman, force, dagre，各布局详细的配置请参考 ","position":{"start":{"line":34,"column":101,"offset":1937},"end":{"line":35,"column":129,"offset":2068}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/agbmu2","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Layout API文档","position":{"start":{"line":35,"column":130,"offset":2069},"end":{"line":35,"column":142,"offset":2081}}}],"position":{"start":{"line":35,"column":129,"offset":2068},"end":{"line":35,"column":181,"offset":2120}}},{"type":"text","value":" |","position":{"start":{"line":35,"column":181,"offset":2120},"end":{"line":35,"column":183,"offset":2122}}}],"position":{"start":{"line":8,"column":1,"offset":114},"end":{"line":35,"column":183,"offset":2122}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"重点说明","position":{"start":{"line":38,"column":3,"offset":2127},"end":{"line":38,"column":7,"offset":2131}}}],"position":{"start":{"line":38,"column":1,"offset":2125},"end":{"line":38,"column":9,"offset":2133}}},{"type":"text","value":": G6 3.1 版本中实例化 Graph 时，新增了 ","position":{"start":{"line":38,"column":9,"offset":2133},"end":{"line":38,"column":37,"offset":2161}}},{"type":"raw","value":"<code class=\"language-text\">nodeStateStyles</code>","position":{"start":{"line":38,"column":37,"offset":2161},"end":{"line":38,"column":54,"offset":2178}}},{"type":"text","value":"及 ","position":{"start":{"line":38,"column":54,"offset":2178},"end":{"line":38,"column":56,"offset":2180}}},{"type":"raw","value":"<code class=\"language-text\">edgeStateStyles</code>","position":{"start":{"line":38,"column":56,"offset":2180},"end":{"line":38,"column":73,"offset":2197}}},{"type":"text","value":"两个配置项，删除了 ","position":{"start":{"line":38,"column":73,"offset":2197},"end":{"line":38,"column":83,"offset":2207}}},{"type":"raw","value":"<code class=\"language-text\">nodeStyle</code>","position":{"start":{"line":38,"column":83,"offset":2207},"end":{"line":38,"column":94,"offset":2218}}},{"type":"text","value":" 和 ","position":{"start":{"line":38,"column":94,"offset":2218},"end":{"line":38,"column":97,"offset":2221}}},{"type":"raw","value":"<code class=\"language-text\">edgeStyle</code>","position":{"start":{"line":38,"column":97,"offset":2221},"end":{"line":38,"column":108,"offset":2232}}},{"type":"text","value":" ，使用 3.1 以下版本的同学，只需要将 ","position":{"start":{"line":38,"column":108,"offset":2232},"end":{"line":38,"column":130,"offset":2254}}},{"type":"raw","value":"<code class=\"language-text\">nodeStyle</code>","position":{"start":{"line":38,"column":130,"offset":2254},"end":{"line":38,"column":141,"offset":2265}}},{"type":"text","value":" 改成 ","position":{"start":{"line":38,"column":141,"offset":2265},"end":{"line":38,"column":145,"offset":2269}}},{"type":"raw","value":"<code class=\"language-text\">nodeStateStyles</code>","position":{"start":{"line":38,"column":145,"offset":2269},"end":{"line":38,"column":162,"offset":2286}}},{"type":"text","value":" ，将 edgeStyle 改成 ","position":{"start":{"line":38,"column":162,"offset":2286},"end":{"line":38,"column":179,"offset":2303}}},{"type":"raw","value":"<code class=\"language-text\">edgeStateStyles</code>","position":{"start":{"line":38,"column":179,"offset":2303},"end":{"line":38,"column":196,"offset":2320}}},{"type":"text","value":" ，配置内容保持不变。","position":{"start":{"line":38,"column":196,"offset":2320},"end":{"line":38,"column":207,"offset":2331}}}],"position":{"start":{"line":38,"column":1,"offset":2125},"end":{"line":38,"column":207,"offset":2331}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":40,"column":3,"offset":2335},"end":{"line":40,"column":5,"offset":2337}}}],"position":{"start":{"line":40,"column":1,"offset":2333},"end":{"line":40,"column":7,"offset":2339}}},{"type":"text","value":"\nGraph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。","position":{"start":{"line":40,"column":7,"offset":2339},"end":{"line":41,"column":38,"offset":2377}}}],"position":{"start":{"line":40,"column":1,"offset":2333},"end":{"line":41,"column":38,"offset":2377}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  container<span class=\"token punctuation\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">,</span>\n  width<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n  height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</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 punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'radial'</span><span class=\"token punctuation\">,</span>\n    unitRadius<span class=\"token punctuation\">:</span> <span class=\"token number\">50</span><span class=\"token punctuation\">,</span>\n    center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">500</span><span class=\"token punctuation\">,</span> <span class=\"token number\">300</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":42,"column":1,"offset":2378},"end":{"line":56,"column":4,"offset":2596}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"加载"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8A%A0%E8%BD%BD","aria-label":"加载 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"加载","position":{"start":{"line":59,"column":4,"offset":2602},"end":{"line":59,"column":6,"offset":2604}}}],"position":{"start":{"line":59,"column":1,"offset":2599},"end":{"line":59,"column":6,"offset":2604}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"datadata"},"children":[{"type":"element","tagName":"a","properties":{"href":"#datadata","aria-label":"datadata permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"data(data)","position":{"start":{"line":60,"column":5,"offset":2609},"end":{"line":60,"column":15,"offset":2619}}}],"position":{"start":{"line":60,"column":1,"offset":2605},"end":{"line":60,"column":15,"offset":2619}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置图初始化数据。","position":{"start":{"line":61,"column":1,"offset":2620},"end":{"line":61,"column":10,"offset":2629}}}],"position":{"start":{"line":61,"column":1,"offset":2620},"end":{"line":61,"column":10,"offset":2629}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":63,"column":3,"offset":2633},"end":{"line":63,"column":5,"offset":2635}}}],"position":{"start":{"line":63,"column":1,"offset":2631},"end":{"line":63,"column":7,"offset":2637}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |","position":{"start":{"line":63,"column":7,"offset":2637},"end":{"line":66,"column":59,"offset":2746}}}],"position":{"start":{"line":63,"column":1,"offset":2631},"end":{"line":66,"column":59,"offset":2746}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":68,"column":3,"offset":2750},"end":{"line":68,"column":5,"offset":2752}}}],"position":{"start":{"line":68,"column":1,"offset":2748},"end":{"line":68,"column":7,"offset":2754}}}],"position":{"start":{"line":68,"column":1,"offset":2748},"end":{"line":68,"column":7,"offset":2754}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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  edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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>\n\n<span class=\"token comment\">// graph是Graph的实例</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":69,"column":1,"offset":2755},"end":{"line":91,"column":4,"offset":3014}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"渲染"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%B8%B2%E6%9F%93","aria-label":"渲染 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"渲染","position":{"start":{"line":93,"column":4,"offset":3019},"end":{"line":93,"column":6,"offset":3021}}}],"position":{"start":{"line":93,"column":1,"offset":3016},"end":{"line":93,"column":6,"offset":3021}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"render"},"children":[{"type":"element","tagName":"a","properties":{"href":"#render","aria-label":"render permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"render()","position":{"start":{"line":94,"column":5,"offset":3026},"end":{"line":94,"column":13,"offset":3034}}}],"position":{"start":{"line":94,"column":1,"offset":3022},"end":{"line":94,"column":13,"offset":3034}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据提供的数据渲染视图。","position":{"start":{"line":95,"column":1,"offset":3035},"end":{"line":95,"column":13,"offset":3047}}}],"position":{"start":{"line":95,"column":1,"offset":3035},"end":{"line":95,"column":13,"offset":3047}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":97,"column":3,"offset":3051},"end":{"line":97,"column":5,"offset":3053}}}],"position":{"start":{"line":97,"column":1,"offset":3049},"end":{"line":97,"column":7,"offset":3055}}}],"position":{"start":{"line":97,"column":1,"offset":3049},"end":{"line":97,"column":7,"offset":3055}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":98,"column":1,"offset":3056},"end":{"line":100,"column":4,"offset":3088}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"rendercustomgroupdata-grouptype"},"children":[{"type":"element","tagName":"a","properties":{"href":"#rendercustomgroupdata-grouptype","aria-label":"rendercustomgroupdata grouptype permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"renderCustomGroup(data, groupType)","position":{"start":{"line":102,"column":5,"offset":3094},"end":{"line":102,"column":39,"offset":3128}}}],"position":{"start":{"line":102,"column":1,"offset":3090},"end":{"line":102,"column":39,"offset":3128}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据提供的数据渲染组群。","position":{"start":{"line":103,"column":1,"offset":3129},"end":{"line":103,"column":13,"offset":3141}}}],"position":{"start":{"line":103,"column":1,"offset":3129},"end":{"line":103,"column":13,"offset":3141}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":105,"column":3,"offset":3145},"end":{"line":105,"column":5,"offset":3147}}}],"position":{"start":{"line":105,"column":1,"offset":3143},"end":{"line":105,"column":7,"offset":3149}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 渲染图的数据 |\n| groupType | string | true | group类型，支持circle、rect |","position":{"start":{"line":105,"column":7,"offset":3149},"end":{"line":109,"column":54,"offset":3287}}}],"position":{"start":{"line":105,"column":1,"offset":3143},"end":{"line":109,"column":54,"offset":3287}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":111,"column":3,"offset":3291},"end":{"line":111,"column":5,"offset":3293}}}],"position":{"start":{"line":111,"column":1,"offset":3289},"end":{"line":111,"column":7,"offset":3295}}}],"position":{"start":{"line":111,"column":1,"offset":3289},"end":{"line":111,"column":7,"offset":3295}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n      groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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  edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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  groups<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'group1'</span><span class=\"token punctuation\">,</span>\n      title<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n        text<span class=\"token punctuation\">:</span> <span class=\"token string\">'我的群组1'</span><span class=\"token punctuation\">,</span>\n        stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'#444'</span><span class=\"token punctuation\">,</span>\n        offsetX<span class=\"token punctuation\">:</span> <span class=\"token operator\">-</span><span class=\"token number\">20</span><span class=\"token punctuation\">,</span>\n        offsetY<span class=\"token punctuation\">:</span> <span class=\"token number\">30</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>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// graph是Graph的实例</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">renderCustomGroup</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">,</span> <span class=\"token string\">'circle'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":112,"column":1,"offset":3296},"end":{"line":147,"column":4,"offset":3795}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":""},"children":[{"type":"element","tagName":"a","properties":{"href":"#","aria-label":" permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]}],"position":{"start":{"line":148,"column":1,"offset":3796},"end":{"line":148,"column":5,"offset":3800}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"readdata"},"children":[{"type":"element","tagName":"a","properties":{"href":"#readdata","aria-label":"readdata permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"read(data)","position":{"start":{"line":149,"column":5,"offset":3805},"end":{"line":149,"column":15,"offset":3815}}}],"position":{"start":{"line":149,"column":1,"offset":3801},"end":{"line":149,"column":15,"offset":3815}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"接收数据，并进行渲染，read 方法的功能相当于 data 和 render 方法的结合。","position":{"start":{"line":150,"column":1,"offset":3816},"end":{"line":150,"column":46,"offset":3861}}}],"position":{"start":{"line":150,"column":1,"offset":3816},"end":{"line":150,"column":46,"offset":3861}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":152,"column":3,"offset":3865},"end":{"line":152,"column":5,"offset":3867}}}],"position":{"start":{"line":152,"column":1,"offset":3863},"end":{"line":152,"column":7,"offset":3869}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |","position":{"start":{"line":152,"column":7,"offset":3869},"end":{"line":155,"column":59,"offset":3978}}}],"position":{"start":{"line":152,"column":1,"offset":3863},"end":{"line":155,"column":59,"offset":3978}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":157,"column":3,"offset":3982},"end":{"line":157,"column":5,"offset":3984}}}],"position":{"start":{"line":157,"column":1,"offset":3980},"end":{"line":157,"column":7,"offset":3986}}}],"position":{"start":{"line":157,"column":1,"offset":3980},"end":{"line":157,"column":7,"offset":3986}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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  edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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>\n\n<span class=\"token comment\">// graph是Graph的实例</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">read</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":158,"column":1,"offset":3987},"end":{"line":180,"column":4,"offset":4246}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"changedatadata"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changedatadata","aria-label":"changedatadata permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"changeData(data)","position":{"start":{"line":182,"column":5,"offset":4252},"end":{"line":182,"column":21,"offset":4268}}}],"position":{"start":{"line":182,"column":1,"offset":4248},"end":{"line":182,"column":21,"offset":4268}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更新数据源，根据新的数据重新渲染视图。","position":{"start":{"line":183,"column":1,"offset":4269},"end":{"line":183,"column":20,"offset":4288}}}],"position":{"start":{"line":183,"column":1,"offset":4269},"end":{"line":183,"column":20,"offset":4288}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":185,"column":3,"offset":4292},"end":{"line":185,"column":5,"offset":4294}}}],"position":{"start":{"line":185,"column":1,"offset":4290},"end":{"line":185,"column":7,"offset":4296}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| data | Object | true | 初始化的图数据，是一个包括 nodes 和 edges 的对象 |","position":{"start":{"line":185,"column":7,"offset":4296},"end":{"line":188,"column":59,"offset":4405}}}],"position":{"start":{"line":185,"column":1,"offset":4290},"end":{"line":188,"column":59,"offset":4405}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":191,"column":3,"offset":4410},"end":{"line":191,"column":5,"offset":4412}}}],"position":{"start":{"line":191,"column":1,"offset":4408},"end":{"line":191,"column":7,"offset":4414}}}],"position":{"start":{"line":191,"column":1,"offset":4408},"end":{"line":191,"column":7,"offset":4414}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> data <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</span><span class=\"token punctuation\">,</span>\n      label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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  edges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n    <span class=\"token punctuation\">{</span>\n      source<span class=\"token punctuation\">:</span> <span class=\"token string\">'node1'</span><span class=\"token punctuation\">,</span>\n      target<span class=\"token punctuation\">:</span> <span class=\"token string\">'node2'</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>\n\n<span class=\"token comment\">// graph是Graph的实例</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">changeData</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":192,"column":1,"offset":4415},"end":{"line":214,"column":4,"offset":4680}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"collapsegroupgroupid"},"children":[{"type":"element","tagName":"a","properties":{"href":"#collapsegroupgroupid","aria-label":"collapsegroupgroupid permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"collapseGroup(groupId)","position":{"start":{"line":216,"column":5,"offset":4686},"end":{"line":216,"column":27,"offset":4708}}}],"position":{"start":{"line":216,"column":1,"offset":4682},"end":{"line":216,"column":27,"offset":4708}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"收起分组，收起分组后，隐藏分组中的所有节点和边，分组外部与分组内节点有连线的则临时连接到分组上面。","position":{"start":{"line":217,"column":1,"offset":4709},"end":{"line":217,"column":50,"offset":4758}}}],"position":{"start":{"line":217,"column":1,"offset":4709},"end":{"line":217,"column":50,"offset":4758}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":219,"column":3,"offset":4762},"end":{"line":219,"column":5,"offset":4764}}}],"position":{"start":{"line":219,"column":1,"offset":4760},"end":{"line":219,"column":7,"offset":4766}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| groupId | String | true | 分组ID |","position":{"start":{"line":219,"column":7,"offset":4766},"end":{"line":222,"column":35,"offset":4851}}}],"position":{"start":{"line":219,"column":1,"offset":4760},"end":{"line":222,"column":35,"offset":4851}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":225,"column":3,"offset":4856},"end":{"line":225,"column":5,"offset":4858}}}],"position":{"start":{"line":225,"column":1,"offset":4854},"end":{"line":225,"column":7,"offset":4860}}}],"position":{"start":{"line":225,"column":1,"offset":4854},"end":{"line":225,"column":7,"offset":4860}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">collapseGroup</span><span class=\"token punctuation\">(</span><span class=\"token string\">'groupId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":226,"column":1,"offset":4861},"end":{"line":228,"column":4,"offset":4909}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"expandgroupgroupid"},"children":[{"type":"element","tagName":"a","properties":{"href":"#expandgroupgroupid","aria-label":"expandgroupgroupid permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"expandGroup(groupId)","position":{"start":{"line":230,"column":5,"offset":4915},"end":{"line":230,"column":25,"offset":4935}}}],"position":{"start":{"line":230,"column":1,"offset":4911},"end":{"line":230,"column":25,"offset":4935}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"展开分组，显示分组中的所有节点和边，恢复收起前的连接情况。","position":{"start":{"line":231,"column":1,"offset":4936},"end":{"line":231,"column":30,"offset":4965}}}],"position":{"start":{"line":231,"column":1,"offset":4936},"end":{"line":231,"column":30,"offset":4965}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":233,"column":3,"offset":4969},"end":{"line":233,"column":5,"offset":4971}}}],"position":{"start":{"line":233,"column":1,"offset":4967},"end":{"line":233,"column":7,"offset":4973}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| groupId | String | true | 分组ID |","position":{"start":{"line":233,"column":7,"offset":4973},"end":{"line":236,"column":35,"offset":5058}}}],"position":{"start":{"line":233,"column":1,"offset":4967},"end":{"line":236,"column":35,"offset":5058}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":239,"column":3,"offset":5063},"end":{"line":239,"column":5,"offset":5065}}}],"position":{"start":{"line":239,"column":1,"offset":5061},"end":{"line":239,"column":7,"offset":5067}}}],"position":{"start":{"line":239,"column":1,"offset":5061},"end":{"line":239,"column":7,"offset":5067}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">expandGroup</span><span class=\"token punctuation\">(</span><span class=\"token string\">'groupId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":240,"column":1,"offset":5068},"end":{"line":242,"column":4,"offset":5114}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"更新"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9B%B4%E6%96%B0","aria-label":"更新 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"更新","position":{"start":{"line":244,"column":4,"offset":5119},"end":{"line":244,"column":6,"offset":5121}}}],"position":{"start":{"line":244,"column":1,"offset":5116},"end":{"line":244,"column":6,"offset":5121}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"additemtype-model"},"children":[{"type":"element","tagName":"a","properties":{"href":"#additemtype-model","aria-label":"additemtype model permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"addItem(type, model)","position":{"start":{"line":245,"column":5,"offset":5126},"end":{"line":245,"column":25,"offset":5146}}}],"position":{"start":{"line":245,"column":1,"offset":5122},"end":{"line":245,"column":25,"offset":5146}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"新增元素。","position":{"start":{"line":246,"column":1,"offset":5147},"end":{"line":246,"column":6,"offset":5152}}}],"position":{"start":{"line":246,"column":1,"offset":5147},"end":{"line":246,"column":6,"offset":5152}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":248,"column":3,"offset":5156},"end":{"line":248,"column":5,"offset":5158}}}],"position":{"start":{"line":248,"column":1,"offset":5154},"end":{"line":248,"column":7,"offset":5160}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge 和group |\n| model | Object | true | 元素的数据模型，type = group 时，参看","position":{"start":{"line":248,"column":7,"offset":5160},"end":{"line":252,"column":52,"offset":5316}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/taixri#h8q8H","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"这里","position":{"start":{"line":252,"column":53,"offset":5317},"end":{"line":252,"column":55,"offset":5319}}}],"position":{"start":{"line":252,"column":52,"offset":5316},"end":{"line":252,"column":100,"offset":5364}}},{"type":"text","value":" |","position":{"start":{"line":252,"column":100,"offset":5364},"end":{"line":252,"column":102,"offset":5366}}}],"position":{"start":{"line":248,"column":1,"offset":5154},"end":{"line":252,"column":102,"offset":5366}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":254,"column":3,"offset":5370},"end":{"line":254,"column":5,"offset":5372}}}],"position":{"start":{"line":254,"column":1,"offset":5368},"end":{"line":254,"column":7,"offset":5374}}}],"position":{"start":{"line":254,"column":1,"offset":5368},"end":{"line":254,"column":7,"offset":5374}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> model <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span>\n  label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span>\n  address<span class=\"token punctuation\">:</span> <span class=\"token string\">'cq'</span><span class=\"token punctuation\">,</span>\n  x<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n  y<span class=\"token punctuation\">:</span> <span class=\"token number\">150</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\">'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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span> model<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 当type为group时候，model的数据结构如下：</span>\n<span class=\"token keyword\">const</span> model <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  groupId<span class=\"token punctuation\">:</span> <span class=\"token string\">'xxx000999'</span><span class=\"token punctuation\">,</span>\n  nodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'123'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'23'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  type<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</span><span class=\"token punctuation\">,</span>\n  zIndex<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n  title<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    text<span class=\"token punctuation\">:</span> <span class=\"token string\">'名称'</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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">,</span> model<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":255,"column":1,"offset":5375},"end":{"line":281,"column":4,"offset":5724}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"addtype-model"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addtype-model","aria-label":"addtype model permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"add(type, model)","position":{"start":{"line":283,"column":5,"offset":5730},"end":{"line":283,"column":21,"offset":5746}}}],"position":{"start":{"line":283,"column":1,"offset":5726},"end":{"line":283,"column":21,"offset":5746}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"同 addItem(type, model)。","position":{"start":{"line":284,"column":1,"offset":5747},"end":{"line":284,"column":24,"offset":5770}}}],"position":{"start":{"line":284,"column":1,"offset":5747},"end":{"line":284,"column":24,"offset":5770}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"updateitemitem-model"},"children":[{"type":"element","tagName":"a","properties":{"href":"#updateitemitem-model","aria-label":"updateitemitem model permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"updateItem(item, model)","position":{"start":{"line":286,"column":5,"offset":5776},"end":{"line":286,"column":28,"offset":5799}}}],"position":{"start":{"line":286,"column":1,"offset":5772},"end":{"line":286,"column":28,"offset":5799}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更新元素，包括更新数据、样式等。","position":{"start":{"line":287,"column":1,"offset":5800},"end":{"line":287,"column":17,"offset":5816}}}],"position":{"start":{"line":287,"column":1,"offset":5800},"end":{"line":287,"column":17,"offset":5816}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":289,"column":3,"offset":5820},"end":{"line":289,"column":5,"offset":5822}}}],"position":{"start":{"line":289,"column":1,"offset":5818},"end":{"line":289,"column":7,"offset":5824}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| cfg | Object | false | 需要更新的数据模型 |","position":{"start":{"line":289,"column":7,"offset":5824},"end":{"line":293,"column":37,"offset":5959}}}],"position":{"start":{"line":289,"column":1,"offset":5818},"end":{"line":293,"column":37,"offset":5959}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":296,"column":3,"offset":5964},"end":{"line":296,"column":5,"offset":5966}}}],"position":{"start":{"line":296,"column":1,"offset":5962},"end":{"line":296,"column":7,"offset":5968}}}],"position":{"start":{"line":296,"column":1,"offset":5962},"end":{"line":296,"column":7,"offset":5968}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> model <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n  id<span class=\"token punctuation\">:</span> <span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span>\n  label<span class=\"token punctuation\">:</span> <span class=\"token string\">'node'</span><span class=\"token punctuation\">,</span>\n  address<span class=\"token punctuation\">:</span> <span class=\"token string\">'cq'</span><span class=\"token punctuation\">,</span>\n  x<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n  y<span class=\"token punctuation\">:</span> <span class=\"token number\">150</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\">'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\n<span class=\"token comment\">// 通过ID查询节点实例</span>\n<span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">updateItem</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">,</span> model<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":297,"column":1,"offset":5969},"end":{"line":312,"column":4,"offset":6183}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"updateitem-model"},"children":[{"type":"element","tagName":"a","properties":{"href":"#updateitem-model","aria-label":"updateitem model permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"update(item, model)","position":{"start":{"line":314,"column":5,"offset":6189},"end":{"line":314,"column":24,"offset":6208}}}],"position":{"start":{"line":314,"column":1,"offset":6185},"end":{"line":314,"column":24,"offset":6208}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"同updateItem(item, model)。","position":{"start":{"line":315,"column":1,"offset":6209},"end":{"line":315,"column":26,"offset":6234}}}],"position":{"start":{"line":315,"column":1,"offset":6209},"end":{"line":315,"column":26,"offset":6234}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"removeitemitem"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removeitemitem","aria-label":"removeitemitem permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"removeItem(item)","position":{"start":{"line":317,"column":5,"offset":6240},"end":{"line":317,"column":21,"offset":6256}}}],"position":{"start":{"line":317,"column":1,"offset":6236},"end":{"line":317,"column":21,"offset":6256}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"new删除元素，当 item 为 group ID 时候，则删除分组。","position":{"start":{"line":318,"column":1,"offset":6257},"end":{"line":318,"column":36,"offset":6292}}}],"position":{"start":{"line":318,"column":1,"offset":6257},"end":{"line":318,"column":36,"offset":6292}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":320,"column":3,"offset":6296},"end":{"line":320,"column":5,"offset":6298}}}],"position":{"start":{"line":320,"column":1,"offset":6294},"end":{"line":320,"column":7,"offset":6300}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |","position":{"start":{"line":320,"column":7,"offset":6300},"end":{"line":323,"column":46,"offset":6396}}}],"position":{"start":{"line":320,"column":1,"offset":6294},"end":{"line":323,"column":46,"offset":6396}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":325,"column":3,"offset":6400},"end":{"line":325,"column":5,"offset":6402}}}],"position":{"start":{"line":325,"column":1,"offset":6398},"end":{"line":325,"column":7,"offset":6404}}}],"position":{"start":{"line":325,"column":1,"offset":6398},"end":{"line":325,"column":7,"offset":6404}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 通过ID查询节点实例</span>\n<span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeItem</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":326,"column":1,"offset":6405},"end":{"line":330,"column":4,"offset":6495}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"removeitem"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removeitem","aria-label":"removeitem permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"remove(item)","position":{"start":{"line":332,"column":5,"offset":6501},"end":{"line":332,"column":17,"offset":6513}}}],"position":{"start":{"line":332,"column":1,"offset":6497},"end":{"line":332,"column":17,"offset":6513}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"同 removeItem(item)。","position":{"start":{"line":333,"column":1,"offset":6514},"end":{"line":333,"column":20,"offset":6533}}}],"position":{"start":{"line":333,"column":1,"offset":6514},"end":{"line":333,"column":20,"offset":6533}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"refresh"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refresh","aria-label":"refresh permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"refresh()","position":{"start":{"line":335,"column":5,"offset":6539},"end":{"line":335,"column":14,"offset":6548}}}],"position":{"start":{"line":335,"column":1,"offset":6535},"end":{"line":335,"column":14,"offset":6548}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当源数据发生变更时，根据新数据刷新视图。","position":{"start":{"line":336,"column":1,"offset":6549},"end":{"line":336,"column":21,"offset":6569}}}],"position":{"start":{"line":336,"column":1,"offset":6549},"end":{"line":336,"column":21,"offset":6569}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":338,"column":1,"offset":6571},"end":{"line":338,"column":8,"offset":6578}}}],"position":{"start":{"line":338,"column":1,"offset":6571},"end":{"line":338,"column":8,"offset":6578}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":340,"column":3,"offset":6582},"end":{"line":340,"column":5,"offset":6584}}}],"position":{"start":{"line":340,"column":1,"offset":6580},"end":{"line":340,"column":7,"offset":6586}}}],"position":{"start":{"line":340,"column":1,"offset":6580},"end":{"line":340,"column":7,"offset":6586}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">refresh</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":341,"column":1,"offset":6587},"end":{"line":343,"column":4,"offset":6620}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"refreshitemitem"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refreshitemitem","aria-label":"refreshitemitem permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"refreshItem(item)","position":{"start":{"line":345,"column":5,"offset":6626},"end":{"line":345,"column":22,"offset":6643}}}],"position":{"start":{"line":345,"column":1,"offset":6622},"end":{"line":345,"column":22,"offset":6643}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"刷新指定元素。","position":{"start":{"line":346,"column":1,"offset":6644},"end":{"line":346,"column":8,"offset":6651}}}],"position":{"start":{"line":346,"column":1,"offset":6644},"end":{"line":346,"column":8,"offset":6651}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":348,"column":3,"offset":6655},"end":{"line":348,"column":5,"offset":6657}}}],"position":{"start":{"line":348,"column":1,"offset":6653},"end":{"line":348,"column":7,"offset":6659}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |","position":{"start":{"line":348,"column":7,"offset":6659},"end":{"line":351,"column":46,"offset":6755}}}],"position":{"start":{"line":348,"column":1,"offset":6653},"end":{"line":351,"column":46,"offset":6755}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":354,"column":3,"offset":6760},"end":{"line":354,"column":5,"offset":6762}}}],"position":{"start":{"line":354,"column":1,"offset":6758},"end":{"line":354,"column":7,"offset":6764}}}],"position":{"start":{"line":354,"column":1,"offset":6758},"end":{"line":354,"column":7,"offset":6764}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 通过ID查询节点实例</span>\n<span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">refreshItem</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":355,"column":1,"offset":6765},"end":{"line":359,"column":4,"offset":6856}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"refreshpositions"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refreshpositions","aria-label":"refreshpositions permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"refreshPositions()","position":{"start":{"line":361,"column":5,"offset":6862},"end":{"line":361,"column":23,"offset":6880}}}],"position":{"start":{"line":361,"column":1,"offset":6858},"end":{"line":361,"column":23,"offset":6880}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"当节点位置发生变化时，刷新所有节点位置，并重计算边的位置。","position":{"start":{"line":362,"column":1,"offset":6881},"end":{"line":362,"column":30,"offset":6910}}}],"position":{"start":{"line":362,"column":1,"offset":6881},"end":{"line":362,"column":30,"offset":6910}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":364,"column":1,"offset":6912},"end":{"line":364,"column":8,"offset":6919}}}],"position":{"start":{"line":364,"column":1,"offset":6912},"end":{"line":364,"column":8,"offset":6919}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":366,"column":3,"offset":6923},"end":{"line":366,"column":5,"offset":6925}}}],"position":{"start":{"line":366,"column":1,"offset":6921},"end":{"line":366,"column":7,"offset":6927}}}],"position":{"start":{"line":366,"column":1,"offset":6921},"end":{"line":366,"column":7,"offset":6927}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">refreshPositions</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":367,"column":1,"offset":6928},"end":{"line":369,"column":4,"offset":6970}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"paint"},"children":[{"type":"element","tagName":"a","properties":{"href":"#paint","aria-label":"paint permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"paint()","position":{"start":{"line":372,"column":5,"offset":6977},"end":{"line":372,"column":12,"offset":6984}}}],"position":{"start":{"line":372,"column":1,"offset":6973},"end":{"line":372,"column":12,"offset":6984}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"仅重新绘制画布。当设置了元素样式或状态后，通过调用 ","position":{"start":{"line":373,"column":1,"offset":6985},"end":{"line":373,"column":27,"offset":7011}}},{"type":"raw","value":"<code class=\"language-text\">paint()</code>","position":{"start":{"line":373,"column":27,"offset":7011},"end":{"line":373,"column":36,"offset":7020}}},{"type":"text","value":" 方法，让修改生效。","position":{"start":{"line":373,"column":36,"offset":7020},"end":{"line":373,"column":46,"offset":7030}}}],"position":{"start":{"line":373,"column":1,"offset":6985},"end":{"line":373,"column":46,"offset":7030}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":375,"column":1,"offset":7032},"end":{"line":375,"column":8,"offset":7039}}}],"position":{"start":{"line":375,"column":1,"offset":7032},"end":{"line":375,"column":8,"offset":7039}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":377,"column":3,"offset":7043},"end":{"line":377,"column":5,"offset":7045}}}],"position":{"start":{"line":377,"column":1,"offset":7041},"end":{"line":377,"column":7,"offset":7047}}}],"position":{"start":{"line":377,"column":1,"offset":7041},"end":{"line":377,"column":7,"offset":7047}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<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\n<span class=\"token keyword\">const</span> autoPaint <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'autoPaint'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">setAutoPaint</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\ngraph<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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">setAutoPaint</span><span class=\"token punctuation\">(</span>autoPaint<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":378,"column":1,"offset":7048},"end":{"line":389,"column":4,"offset":7273}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setautopaintauto"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setautopaintauto","aria-label":"setautopaintauto permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"setAutoPaint(auto)","position":{"start":{"line":391,"column":5,"offset":7279},"end":{"line":391,"column":23,"offset":7297}}}],"position":{"start":{"line":391,"column":1,"offset":7275},"end":{"line":391,"column":23,"offset":7297}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置是否在更新/删除后自动重绘，一般搭配 ","position":{"start":{"line":392,"column":1,"offset":7298},"end":{"line":392,"column":22,"offset":7319}}},{"type":"raw","value":"<code class=\"language-text\">paint()</code>","position":{"start":{"line":392,"column":22,"offset":7319},"end":{"line":392,"column":31,"offset":7328}}},{"type":"text","value":" 方法使用。","position":{"start":{"line":392,"column":31,"offset":7328},"end":{"line":392,"column":37,"offset":7334}}}],"position":{"start":{"line":392,"column":1,"offset":7298},"end":{"line":392,"column":37,"offset":7334}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":394,"column":3,"offset":7338},"end":{"line":394,"column":5,"offset":7340}}}],"position":{"start":{"line":394,"column":1,"offset":7336},"end":{"line":394,"column":7,"offset":7342}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| auto | Boolean | true | 是否自动重绘 |","position":{"start":{"line":394,"column":7,"offset":7342},"end":{"line":397,"column":35,"offset":7427}}}],"position":{"start":{"line":394,"column":1,"offset":7336},"end":{"line":397,"column":35,"offset":7427}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":400,"column":3,"offset":7432},"end":{"line":400,"column":5,"offset":7434}}}],"position":{"start":{"line":400,"column":1,"offset":7430},"end":{"line":400,"column":7,"offset":7436}}}],"position":{"start":{"line":400,"column":1,"offset":7430},"end":{"line":400,"column":7,"offset":7436}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<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\n<span class=\"token keyword\">const</span> autoPaint <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'autoPaint'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">setAutoPaint</span><span class=\"token punctuation\">(</span><span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\ngraph<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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">paint</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">setAutoPaint</span><span class=\"token punctuation\">(</span>autoPaint<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":401,"column":1,"offset":7437},"end":{"line":412,"column":4,"offset":7662}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"布局"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%B8%83%E5%B1%80","aria-label":"布局 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"布局","position":{"start":{"line":414,"column":4,"offset":7667},"end":{"line":414,"column":6,"offset":7669}}}],"position":{"start":{"line":414,"column":1,"offset":7664},"end":{"line":414,"column":6,"offset":7669}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"G6 3.1 内置了丰富的布局。关于如何使用 G6 中内置的布局，请参考 ","position":{"start":{"line":416,"column":1,"offset":7671},"end":{"line":416,"column":38,"offset":7708}}},{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/agbmu2","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"Layout API文档","position":{"start":{"line":416,"column":39,"offset":7709},"end":{"line":416,"column":51,"offset":7721}}}],"position":{"start":{"line":416,"column":38,"offset":7708},"end":{"line":416,"column":90,"offset":7760}}},{"type":"text","value":"。","position":{"start":{"line":416,"column":90,"offset":7760},"end":{"line":416,"column":91,"offset":7761}}}],"position":{"start":{"line":416,"column":1,"offset":7671},"end":{"line":416,"column":91,"offset":7761}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"layout"},"children":[{"type":"element","tagName":"a","properties":{"href":"#layout","aria-label":"layout permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"layout()","position":{"start":{"line":418,"column":5,"offset":7767},"end":{"line":418,"column":13,"offset":7775}}}],"position":{"start":{"line":418,"column":1,"offset":7763},"end":{"line":418,"column":13,"offset":7775}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"重新以当前配置的属性进行一次布局。","position":{"start":{"line":419,"column":1,"offset":7776},"end":{"line":419,"column":18,"offset":7793}}}],"position":{"start":{"line":419,"column":1,"offset":7776},"end":{"line":419,"column":18,"offset":7793}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":421,"column":3,"offset":7797},"end":{"line":421,"column":5,"offset":7799}}}],"position":{"start":{"line":421,"column":1,"offset":7795},"end":{"line":421,"column":7,"offset":7801}}}],"position":{"start":{"line":421,"column":1,"offset":7795},"end":{"line":421,"column":7,"offset":7801}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  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\">1000</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  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  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</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-node'</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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  nodes<span class=\"token punctuation\">:</span> data<span class=\"token punctuation\">.</span>nodes<span class=\"token punctuation\">,</span>\n  edges<span class=\"token punctuation\">:</span> data<span class=\"token punctuation\">.</span>edges<span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">edge<span class=\"token punctuation\">,</span> i</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    edge<span class=\"token punctuation\">.</span>id <span class=\"token operator\">=</span> <span class=\"token string\">'edge'</span> <span class=\"token operator\">+</span> i<span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">return</span> Object<span class=\"token punctuation\">.</span><span class=\"token function\">assign</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> edge<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><span class=\"token punctuation\">;</span>\n\ngraph<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 keyword\">function</span> <span class=\"token function\">refreshDragedNodePosition</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> model <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'model'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  model<span class=\"token punctuation\">.</span>fx <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">;</span>\n  model<span class=\"token punctuation\">.</span>fy <span class=\"token operator\">=</span> e<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">;</span>\n<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:dragstart'</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\">// 拖动节点时重新布局</span>\n  graph<span class=\"token punctuation\">.</span><span class=\"token function\">layout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">refreshDragedNodePosition</span><span class=\"token punctuation\">(</span>e<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:drag'</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 function\">refreshDragedNodePosition</span><span class=\"token punctuation\">(</span>e<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:dragend'</span><span class=\"token punctuation\">,</span> <span class=\"token parameter\">e</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'model'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>fx <span class=\"token operator\">=</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n  e<span class=\"token punctuation\">.</span>item<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'model'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>fy <span class=\"token operator\">=</span> <span class=\"token keyword\">null</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":422,"column":1,"offset":7802},"end":{"line":465,"column":4,"offset":8536}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"updatelayoutcfg"},"children":[{"type":"element","tagName":"a","properties":{"href":"#updatelayoutcfg","aria-label":"updatelayoutcfg permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"updateLayout(cfg)","position":{"start":{"line":467,"column":5,"offset":8542},"end":{"line":467,"column":22,"offset":8559}}}],"position":{"start":{"line":467,"column":1,"offset":8538},"end":{"line":467,"column":22,"offset":8559}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"更新布局配置项。","position":{"start":{"line":468,"column":1,"offset":8560},"end":{"line":468,"column":9,"offset":8568}}}],"position":{"start":{"line":468,"column":1,"offset":8560},"end":{"line":468,"column":9,"offset":8568}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"如果参数 ","position":{"start":{"line":470,"column":4,"offset":8573},"end":{"line":470,"column":9,"offset":8578}}},{"type":"raw","value":"<code class=\"language-text\">cfg</code>","position":{"start":{"line":470,"column":9,"offset":8578},"end":{"line":470,"column":14,"offset":8583}}},{"type":"text","value":" 中含有 ","position":{"start":{"line":470,"column":14,"offset":8583},"end":{"line":470,"column":19,"offset":8588}}},{"type":"raw","value":"<code class=\"language-text\">type</code>","position":{"start":{"line":470,"column":19,"offset":8588},"end":{"line":470,"column":25,"offset":8594}}},{"type":"text","value":" 字段，","position":{"start":{"line":470,"column":25,"offset":8594},"end":{"line":470,"column":29,"offset":8598}}},{"type":"raw","value":"<code class=\"language-text\">type</code>","position":{"start":{"line":470,"column":29,"offset":8598},"end":{"line":470,"column":35,"offset":8604}}},{"type":"text","value":" 字段类型为 String，且与现有布局方法不同，则更换布局；","position":{"start":{"line":470,"column":35,"offset":8604},"end":{"line":470,"column":66,"offset":8635}}}],"position":{"start":{"line":470,"column":1,"offset":8570},"end":{"line":470,"column":66,"offset":8635}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"如果参数 ","position":{"start":{"line":471,"column":4,"offset":8639},"end":{"line":471,"column":9,"offset":8644}}},{"type":"raw","value":"<code class=\"language-text\">cfg</code>","position":{"start":{"line":471,"column":9,"offset":8644},"end":{"line":471,"column":14,"offset":8649}}},{"type":"text","value":" 中不包含 ","position":{"start":{"line":471,"column":14,"offset":8649},"end":{"line":471,"column":20,"offset":8655}}},{"type":"raw","value":"<code class=\"language-text\">type</code>","position":{"start":{"line":471,"column":20,"offset":8655},"end":{"line":471,"column":26,"offset":8661}}},{"type":"text","value":" 字段，则保持原有布局，仅更新布局配置项。","position":{"start":{"line":471,"column":26,"offset":8661},"end":{"line":471,"column":47,"offset":8682}}}],"position":{"start":{"line":471,"column":1,"offset":8636},"end":{"line":471,"column":47,"offset":8682}}},{"type":"text","value":"\n"}],"position":{"start":{"line":470,"column":1,"offset":8570},"end":{"line":471,"column":47,"offset":8682}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":473,"column":3,"offset":8686},"end":{"line":473,"column":5,"offset":8688}}}],"position":{"start":{"line":473,"column":1,"offset":8684},"end":{"line":473,"column":7,"offset":8690}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| cfg | Object | true | 新布局配置项 |","position":{"start":{"line":473,"column":7,"offset":8690},"end":{"line":476,"column":33,"offset":8773}}}],"position":{"start":{"line":473,"column":1,"offset":8684},"end":{"line":476,"column":33,"offset":8773}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":479,"column":3,"offset":8778},"end":{"line":479,"column":5,"offset":8780}}}],"position":{"start":{"line":479,"column":1,"offset":8776},"end":{"line":479,"column":7,"offset":8782}}}],"position":{"start":{"line":479,"column":1,"offset":8776},"end":{"line":479,"column":7,"offset":8782}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  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\">1000</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  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\">'drag-node'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  layout<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n    type<span class=\"token punctuation\">:</span> <span class=\"token string\">'circular'</span><span class=\"token punctuation\">,</span>\n    center<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token number\">500</span><span class=\"token punctuation\">,</span> <span class=\"token number\">300</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  animate<span class=\"token punctuation\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<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\">// 实例化时通过layout指定布局，在合适的时候通过updateLayout更新布局配置</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">updateLayout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n  radius<span class=\"token punctuation\">:</span> <span class=\"token number\">200</span><span class=\"token punctuation\">,</span>\n  startAngle<span class=\"token punctuation\">:</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span> <span class=\"token operator\">/</span> <span class=\"token number\">4</span><span class=\"token punctuation\">,</span>\n  endAngle<span class=\"token punctuation\">:</span> Math<span class=\"token punctuation\">.</span><span class=\"token constant\">PI</span><span class=\"token punctuation\">,</span>\n  divisions<span class=\"token punctuation\">:</span> <span class=\"token number\">5</span><span class=\"token punctuation\">,</span>\n  ordering<span class=\"token punctuation\">:</span> <span class=\"token string\">'degree'</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":480,"column":1,"offset":8783},"end":{"line":505,"column":4,"offset":9233}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"销毁"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%94%80%E6%AF%81","aria-label":"销毁 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"销毁","position":{"start":{"line":507,"column":4,"offset":9238},"end":{"line":507,"column":6,"offset":9240}}}],"position":{"start":{"line":507,"column":1,"offset":9235},"end":{"line":507,"column":6,"offset":9240}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"clear"},"children":[{"type":"element","tagName":"a","properties":{"href":"#clear","aria-label":"clear permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"clear()","position":{"start":{"line":508,"column":5,"offset":9245},"end":{"line":508,"column":12,"offset":9252}}}],"position":{"start":{"line":508,"column":1,"offset":9241},"end":{"line":508,"column":12,"offset":9252}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"清除画布元素。该方法一般用于清空数据源，重新设置数据源，重新 render 的场景，此时所有的图形都会被清除。","position":{"start":{"line":509,"column":1,"offset":9253},"end":{"line":509,"column":56,"offset":9308}}}],"position":{"start":{"line":509,"column":1,"offset":9253},"end":{"line":509,"column":56,"offset":9308}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":511,"column":1,"offset":9310},"end":{"line":511,"column":8,"offset":9317}}}],"position":{"start":{"line":511,"column":1,"offset":9310},"end":{"line":511,"column":8,"offset":9317}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":513,"column":3,"offset":9321},"end":{"line":513,"column":5,"offset":9323}}}],"position":{"start":{"line":513,"column":1,"offset":9319},"end":{"line":513,"column":7,"offset":9325}}}],"position":{"start":{"line":513,"column":1,"offset":9319},"end":{"line":513,"column":7,"offset":9325}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">clear</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":514,"column":1,"offset":9326},"end":{"line":516,"column":4,"offset":9357}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"destroy"},"children":[{"type":"element","tagName":"a","properties":{"href":"#destroy","aria-label":"destroy permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"destroy()","position":{"start":{"line":518,"column":5,"offset":9363},"end":{"line":518,"column":14,"offset":9372}}}],"position":{"start":{"line":518,"column":1,"offset":9359},"end":{"line":518,"column":14,"offset":9372}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"销毁画布。","position":{"start":{"line":519,"column":1,"offset":9373},"end":{"line":519,"column":6,"offset":9378}}}],"position":{"start":{"line":519,"column":1,"offset":9373},"end":{"line":519,"column":6,"offset":9378}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":521,"column":1,"offset":9380},"end":{"line":521,"column":8,"offset":9387}}}],"position":{"start":{"line":521,"column":1,"offset":9380},"end":{"line":521,"column":8,"offset":9387}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":523,"column":3,"offset":9391},"end":{"line":523,"column":5,"offset":9393}}}],"position":{"start":{"line":523,"column":1,"offset":9389},"end":{"line":523,"column":7,"offset":9395}}}],"position":{"start":{"line":523,"column":1,"offset":9389},"end":{"line":523,"column":7,"offset":9395}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">destroy</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":524,"column":1,"offset":9396},"end":{"line":526,"column":4,"offset":9429}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"状态"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E7%8A%B6%E6%80%81","aria-label":"状态 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"状态","position":{"start":{"line":528,"column":4,"offset":9434},"end":{"line":528,"column":6,"offset":9436}}}],"position":{"start":{"line":528,"column":1,"offset":9431},"end":{"line":528,"column":6,"offset":9436}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"showitemitem"},"children":[{"type":"element","tagName":"a","properties":{"href":"#showitemitem","aria-label":"showitemitem permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"showItem(item)","position":{"start":{"line":529,"column":5,"offset":9441},"end":{"line":529,"column":19,"offset":9455}}}],"position":{"start":{"line":529,"column":1,"offset":9437},"end":{"line":529,"column":19,"offset":9455}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"显示指定的元素。","position":{"start":{"line":530,"column":1,"offset":9456},"end":{"line":530,"column":9,"offset":9464}}}],"position":{"start":{"line":530,"column":1,"offset":9456},"end":{"line":530,"column":9,"offset":9464}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":532,"column":3,"offset":9468},"end":{"line":532,"column":5,"offset":9470}}}],"position":{"start":{"line":532,"column":1,"offset":9466},"end":{"line":532,"column":7,"offset":9472}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |","position":{"start":{"line":532,"column":7,"offset":9472},"end":{"line":535,"column":46,"offset":9568}}}],"position":{"start":{"line":532,"column":1,"offset":9466},"end":{"line":535,"column":46,"offset":9568}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":538,"column":3,"offset":9573},"end":{"line":538,"column":5,"offset":9575}}}],"position":{"start":{"line":538,"column":1,"offset":9571},"end":{"line":538,"column":7,"offset":9577}}}],"position":{"start":{"line":538,"column":1,"offset":9571},"end":{"line":538,"column":7,"offset":9577}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 通过ID查询节点实例</span>\n<span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'nodeId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">showItem</span><span class=\"token punctuation\">(</span>item<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\">showItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'nodeId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":539,"column":1,"offset":9578},"end":{"line":546,"column":4,"offset":9701}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"hideitemitem"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hideitemitem","aria-label":"hideitemitem permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"hideItem(item)","position":{"start":{"line":548,"column":5,"offset":9707},"end":{"line":548,"column":19,"offset":9721}}}],"position":{"start":{"line":548,"column":1,"offset":9703},"end":{"line":548,"column":19,"offset":9721}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"隐藏指定元素。","position":{"start":{"line":549,"column":1,"offset":9722},"end":{"line":549,"column":8,"offset":9729}}}],"position":{"start":{"line":549,"column":1,"offset":9722},"end":{"line":549,"column":8,"offset":9729}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":551,"column":3,"offset":9733},"end":{"line":551,"column":5,"offset":9735}}}],"position":{"start":{"line":551,"column":1,"offset":9731},"end":{"line":551,"column":7,"offset":9737}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素ID或元素实例 |","position":{"start":{"line":551,"column":7,"offset":9737},"end":{"line":554,"column":46,"offset":9833}}}],"position":{"start":{"line":551,"column":1,"offset":9731},"end":{"line":554,"column":46,"offset":9833}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":557,"column":3,"offset":9838},"end":{"line":557,"column":5,"offset":9840}}}],"position":{"start":{"line":557,"column":1,"offset":9836},"end":{"line":557,"column":7,"offset":9842}}}],"position":{"start":{"line":557,"column":1,"offset":9836},"end":{"line":557,"column":7,"offset":9842}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 通过ID查询节点实例</span>\n<span class=\"token keyword\">const</span> item <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'nodeId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">hideItem</span><span class=\"token punctuation\">(</span>item<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\">hideItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">'nodeId'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":558,"column":1,"offset":9843},"end":{"line":565,"column":4,"offset":9966}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setitemstateitem-state-enabled"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setitemstateitem-state-enabled","aria-label":"setitemstateitem state enabled permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"setItemState(item, state, enabled)","position":{"start":{"line":567,"column":5,"offset":9972},"end":{"line":567,"column":39,"offset":10006}}}],"position":{"start":{"line":567,"column":1,"offset":9968},"end":{"line":567,"column":39,"offset":10006}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置元素状态。","position":{"start":{"line":568,"column":1,"offset":10007},"end":{"line":568,"column":8,"offset":10014}}}],"position":{"start":{"line":568,"column":1,"offset":10007},"end":{"line":568,"column":8,"offset":10014}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法在执行过程中会触发","position":{"start":{"line":570,"column":1,"offset":10016},"end":{"line":570,"column":13,"offset":10028}}},{"type":"raw","value":"<code class=\"language-text\">beforitemstatechange</code>","position":{"start":{"line":570,"column":13,"offset":10028},"end":{"line":570,"column":35,"offset":10050}}},{"type":"text","value":"，","position":{"start":{"line":570,"column":35,"offset":10050},"end":{"line":570,"column":36,"offset":10051}}},{"type":"raw","value":"<code class=\"language-text\">afteritemstatechange</code>","position":{"start":{"line":570,"column":36,"offset":10051},"end":{"line":570,"column":58,"offset":10073}}},{"type":"text","value":"事件。","position":{"start":{"line":570,"column":58,"offset":10073},"end":{"line":570,"column":61,"offset":10076}}}],"position":{"start":{"line":570,"column":1,"offset":10016},"end":{"line":570,"column":61,"offset":10076}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":572,"column":3,"offset":10080},"end":{"line":572,"column":5,"offset":10082}}}],"position":{"start":{"line":572,"column":1,"offset":10078},"end":{"line":572,"column":7,"offset":10084}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| state | String | true | 状态值，支持自定义，如 selected、hover、actived等。 |\n| enabled | Boolean | true | 是否启用状态 |","position":{"start":{"line":572,"column":7,"offset":10084},"end":{"line":577,"column":38,"offset":10285}}}],"position":{"start":{"line":572,"column":1,"offset":10078},"end":{"line":577,"column":38,"offset":10285}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":579,"column":3,"offset":10289},"end":{"line":579,"column":5,"offset":10291}}}],"position":{"start":{"line":579,"column":1,"offset":10287},"end":{"line":579,"column":7,"offset":10293}}}],"position":{"start":{"line":579,"column":1,"offset":10287},"end":{"line":579,"column":7,"offset":10293}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">setItemState</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node1'</span><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</code></pre></div>","position":{"start":{"line":580,"column":1,"offset":10294},"end":{"line":582,"column":4,"offset":10358}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"clearitemstatesitem-states"},"children":[{"type":"element","tagName":"a","properties":{"href":"#clearitemstatesitem-states","aria-label":"clearitemstatesitem states permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"clearItemStates(item, states)","position":{"start":{"line":584,"column":5,"offset":10364},"end":{"line":584,"column":34,"offset":10393}}}],"position":{"start":{"line":584,"column":1,"offset":10360},"end":{"line":584,"column":34,"offset":10393}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"清除元素状态，可以一次性清除多个状态。","position":{"start":{"line":585,"column":1,"offset":10394},"end":{"line":585,"column":20,"offset":10413}}}],"position":{"start":{"line":585,"column":1,"offset":10394},"end":{"line":585,"column":20,"offset":10413}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":587,"column":3,"offset":10417},"end":{"line":587,"column":5,"offset":10419}}}],"position":{"start":{"line":587,"column":1,"offset":10415},"end":{"line":587,"column":7,"offset":10421}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |\n| states | String | Array | null  | false | 取值可以是单个状态值，也可以是状态值数组或 null，当为 null 时，清除该元素的","position":{"start":{"line":587,"column":7,"offset":10421},"end":{"line":591,"column":88,"offset":10607}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"第一个","position":{"start":{"line":591,"column":90,"offset":10609},"end":{"line":591,"column":93,"offset":10612}}}],"position":{"start":{"line":591,"column":88,"offset":10607},"end":{"line":591,"column":95,"offset":10614}}},{"type":"text","value":"状态。 |","position":{"start":{"line":591,"column":95,"offset":10614},"end":{"line":591,"column":100,"offset":10619}}}],"position":{"start":{"line":587,"column":1,"offset":10415},"end":{"line":591,"column":100,"offset":10619}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":594,"column":3,"offset":10624},"end":{"line":594,"column":5,"offset":10626}}}],"position":{"start":{"line":594,"column":1,"offset":10622},"end":{"line":594,"column":7,"offset":10628}}}],"position":{"start":{"line":594,"column":1,"offset":10622},"end":{"line":594,"column":7,"offset":10628}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 清除单个状态</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">clearItemStates</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">,</span> <span class=\"token string\">'a'</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\">clearItemStates</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'a'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'b'</span><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\">clearItemStates</span><span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":595,"column":1,"offset":10629},"end":{"line":604,"column":4,"offset":10782}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"nodenodefn"},"children":[{"type":"element","tagName":"a","properties":{"href":"#nodenodefn","aria-label":"nodenodefn permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"node(nodeFn)","position":{"start":{"line":606,"column":5,"offset":10788},"end":{"line":606,"column":17,"offset":10800}}}],"position":{"start":{"line":606,"column":1,"offset":10784},"end":{"line":606,"column":17,"offset":10800}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置各个节点样式，以及在各个状态下节点的 KeyShape 的样式。","position":{"start":{"line":607,"column":1,"offset":10801},"end":{"line":607,"column":35,"offset":10835}}}],"position":{"start":{"line":607,"column":1,"offset":10801},"end":{"line":607,"column":35,"offset":10835}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"提示：该方法必须","position":{"start":{"line":609,"column":1,"offset":10837},"end":{"line":609,"column":9,"offset":10845}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"在 render 之前调用","position":{"start":{"line":609,"column":11,"offset":10847},"end":{"line":609,"column":24,"offset":10860}}}],"position":{"start":{"line":609,"column":9,"offset":10845},"end":{"line":609,"column":26,"offset":10862}}},{"type":"text","value":"，否则不起作用。","position":{"start":{"line":609,"column":26,"offset":10862},"end":{"line":609,"column":34,"offset":10870}}}],"position":{"start":{"line":609,"column":1,"offset":10837},"end":{"line":609,"column":34,"offset":10870}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":611,"column":3,"offset":10874},"end":{"line":611,"column":5,"offset":10876}}}],"position":{"start":{"line":611,"column":1,"offset":10872},"end":{"line":611,"column":7,"offset":10878}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| nodeFn | Function | true | 指定每个节点样式 |","position":{"start":{"line":611,"column":7,"offset":10878},"end":{"line":614,"column":40,"offset":10968}}}],"position":{"start":{"line":611,"column":1,"offset":10872},"end":{"line":614,"column":40,"offset":10968}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":616,"column":3,"offset":10972},"end":{"line":616,"column":5,"offset":10974}}}],"position":{"start":{"line":616,"column":1,"offset":10970},"end":{"line":616,"column":7,"offset":10976}}}],"position":{"start":{"line":616,"column":1,"offset":10970},"end":{"line":616,"column":7,"offset":10976}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">node</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\">return</span> <span class=\"token punctuation\">{</span>\n    id<span class=\"token punctuation\">:</span> node<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span>\n    shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'rect'</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\">'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<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\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<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</code></pre></div>","position":{"start":{"line":617,"column":1,"offset":10977},"end":{"line":630,"column":4,"offset":11142}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"edgeedgefn"},"children":[{"type":"element","tagName":"a","properties":{"href":"#edgeedgefn","aria-label":"edgeedgefn permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"edge(edgeFn)","position":{"start":{"line":632,"column":5,"offset":11148},"end":{"line":632,"column":17,"offset":11160}}}],"position":{"start":{"line":632,"column":1,"offset":11144},"end":{"line":632,"column":17,"offset":11160}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置各条边的样式。","position":{"start":{"line":633,"column":1,"offset":11161},"end":{"line":633,"column":10,"offset":11170}}}],"position":{"start":{"line":633,"column":1,"offset":11161},"end":{"line":633,"column":10,"offset":11170}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"提示：该方法必须","position":{"start":{"line":635,"column":1,"offset":11172},"end":{"line":635,"column":9,"offset":11180}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"在 render 之前调用","position":{"start":{"line":635,"column":11,"offset":11182},"end":{"line":635,"column":24,"offset":11195}}}],"position":{"start":{"line":635,"column":9,"offset":11180},"end":{"line":635,"column":26,"offset":11197}}},{"type":"text","value":"，否则不起作用。","position":{"start":{"line":635,"column":26,"offset":11197},"end":{"line":635,"column":34,"offset":11205}}}],"position":{"start":{"line":635,"column":1,"offset":11172},"end":{"line":635,"column":34,"offset":11205}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":637,"column":3,"offset":11209},"end":{"line":637,"column":5,"offset":11211}}}],"position":{"start":{"line":637,"column":1,"offset":11207},"end":{"line":637,"column":7,"offset":11213}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| edgeFn | Function | true | 指定每条边的样式 |","position":{"start":{"line":637,"column":7,"offset":11213},"end":{"line":640,"column":40,"offset":11303}}}],"position":{"start":{"line":637,"column":1,"offset":11207},"end":{"line":640,"column":40,"offset":11303}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":642,"column":3,"offset":11307},"end":{"line":642,"column":5,"offset":11309}}}],"position":{"start":{"line":642,"column":1,"offset":11305},"end":{"line":642,"column":7,"offset":11311}}}],"position":{"start":{"line":642,"column":1,"offset":11305},"end":{"line":642,"column":7,"offset":11311}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">edge</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\">return</span> <span class=\"token punctuation\">{</span>\n    id<span class=\"token punctuation\">:</span> edge<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">,</span>\n    shape<span class=\"token punctuation\">:</span> <span class=\"token string\">'cubic-horizontal'</span><span class=\"token punctuation\">,</span>\n    style<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      stroke<span class=\"token punctuation\">:</span> <span class=\"token string\">'green'</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\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">data</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\ngraph<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</code></pre></div>","position":{"start":{"line":643,"column":1,"offset":11312},"end":{"line":656,"column":4,"offset":11492}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"交互"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E4%BA%A4%E4%BA%92","aria-label":"交互 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"交互","position":{"start":{"line":658,"column":4,"offset":11497},"end":{"line":658,"column":6,"offset":11499}}}],"position":{"start":{"line":658,"column":1,"offset":11494},"end":{"line":658,"column":6,"offset":11499}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"addbehaviorsbehaviors-modes"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addbehaviorsbehaviors-modes","aria-label":"addbehaviorsbehaviors modes permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"addBehaviors(behaviors, modes)","position":{"start":{"line":659,"column":5,"offset":11504},"end":{"line":659,"column":35,"offset":11534}}}],"position":{"start":{"line":659,"column":1,"offset":11500},"end":{"line":659,"column":35,"offset":11534}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"新增行为，将单个或多个行为添加到单个或多个模式中。","position":{"start":{"line":660,"column":1,"offset":11535},"end":{"line":660,"column":26,"offset":11560}}}],"position":{"start":{"line":660,"column":1,"offset":11535},"end":{"line":660,"column":26,"offset":11560}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":662,"column":3,"offset":11564},"end":{"line":662,"column":5,"offset":11566}}}],"position":{"start":{"line":662,"column":1,"offset":11562},"end":{"line":662,"column":7,"offset":11568}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| behaviors | String | Array | true | 添加的行为的名称 |\n| modes | String | Array | true | 模式的名称 |","position":{"start":{"line":662,"column":7,"offset":11568},"end":{"line":666,"column":42,"offset":11709}}}],"position":{"start":{"line":662,"column":1,"offset":11562},"end":{"line":666,"column":42,"offset":11709}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":669,"column":3,"offset":11714},"end":{"line":669,"column":5,"offset":11716}}}],"position":{"start":{"line":669,"column":1,"offset":11712},"end":{"line":669,"column":7,"offset":11718}}}],"position":{"start":{"line":669,"column":1,"offset":11712},"end":{"line":669,"column":7,"offset":11718}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 将单个Behavior添加到单个模式（默认的default模式）中</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click-select'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 将多个Behavior添加到单个模式（默认的default模式）中</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'brush-select'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 将单个Behavior添加到多个模式中</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'brush-select'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'default'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 将多个Behavior添加到多个模式中</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">addBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'brush-select'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'default'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":670,"column":1,"offset":11719},"end":{"line":682,"column":4,"offset":12111}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"removebehaviorsbehaviors-modes"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removebehaviorsbehaviors-modes","aria-label":"removebehaviorsbehaviors modes permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"removeBehaviors(behaviors, modes)","position":{"start":{"line":684,"column":5,"offset":12117},"end":{"line":684,"column":38,"offset":12150}}}],"position":{"start":{"line":684,"column":1,"offset":12113},"end":{"line":684,"column":38,"offset":12150}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除行为，将单个或多个行为从单个或多个模式中去除。","position":{"start":{"line":685,"column":1,"offset":12151},"end":{"line":685,"column":26,"offset":12176}}}],"position":{"start":{"line":685,"column":1,"offset":12151},"end":{"line":685,"column":26,"offset":12176}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":687,"column":3,"offset":12180},"end":{"line":687,"column":5,"offset":12182}}}],"position":{"start":{"line":687,"column":1,"offset":12178},"end":{"line":687,"column":7,"offset":12184}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| behaviors | String | Array | true | 删除的行为的名称 |\n| modes | String | Array | true | 模式的名称 |","position":{"start":{"line":687,"column":7,"offset":12184},"end":{"line":691,"column":42,"offset":12325}}}],"position":{"start":{"line":687,"column":1,"offset":12178},"end":{"line":691,"column":42,"offset":12325}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":694,"column":3,"offset":12330},"end":{"line":694,"column":5,"offset":12332}}}],"position":{"start":{"line":694,"column":1,"offset":12328},"end":{"line":694,"column":7,"offset":12334}}}],"position":{"start":{"line":694,"column":1,"offset":12328},"end":{"line":694,"column":7,"offset":12334}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 从单个模式中移除单个Behavior</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click-select'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 从单个模式中移除多个Behavior</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'brush-select'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'default'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 从多个模式中移除单个Behavior</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token string\">'brush-select'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'default'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 从多个模式中移除多个Behavior</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removeBehaviors</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'brush-select'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'click-select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'default'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'select'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":695,"column":1,"offset":12335},"end":{"line":707,"column":4,"offset":12707}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setmodemode"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setmodemode","aria-label":"setmodemode permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"setMode(mode)","position":{"start":{"line":709,"column":5,"offset":12713},"end":{"line":709,"column":18,"offset":12726}}}],"position":{"start":{"line":709,"column":1,"offset":12709},"end":{"line":709,"column":18,"offset":12726}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"切换图行为模式。主要用于不同模式下的行为切换，如从编辑模式下切换到只读模式。","position":{"start":{"line":710,"column":1,"offset":12727},"end":{"line":710,"column":39,"offset":12765}}}],"position":{"start":{"line":710,"column":1,"offset":12727},"end":{"line":710,"column":39,"offset":12765}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":712,"column":3,"offset":12769},"end":{"line":712,"column":5,"offset":12771}}}],"position":{"start":{"line":712,"column":1,"offset":12767},"end":{"line":712,"column":7,"offset":12773}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| mode | String | true | 模式的名称 |","position":{"start":{"line":712,"column":7,"offset":12773},"end":{"line":715,"column":33,"offset":12856}}}],"position":{"start":{"line":712,"column":1,"offset":12767},"end":{"line":715,"column":33,"offset":12856}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":717,"column":3,"offset":12860},"end":{"line":717,"column":5,"offset":12862}}}],"position":{"start":{"line":717,"column":1,"offset":12858},"end":{"line":717,"column":7,"offset":12864}}}],"position":{"start":{"line":717,"column":1,"offset":12858},"end":{"line":717,"column":7,"offset":12864}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> graph <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">G6<span class=\"token punctuation\">.</span>Graph</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n    container<span class=\"token punctuation\">:</span> div<span class=\"token punctuation\">,</span>\n    width<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n    height<span class=\"token punctuation\">:</span> <span class=\"token number\">500</span><span class=\"token punctuation\">,</span>\n    pixelRatio<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</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 operator\">...</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      custom<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span><span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">setMode</span><span class=\"token punctuation\">(</span><span class=\"token string\">'custom'</span><span class=\"token punctuation\">)</span></code></pre></div>","position":{"start":{"line":718,"column":1,"offset":12865},"end":{"line":731,"column":4,"offset":13072}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getcurrentmode"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getcurrentmode","aria-label":"getcurrentmode permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getCurrentMode()","position":{"start":{"line":733,"column":5,"offset":13078},"end":{"line":733,"column":21,"offset":13094}}}],"position":{"start":{"line":733,"column":1,"offset":13074},"end":{"line":733,"column":21,"offset":13094}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取当前的行为模式。","position":{"start":{"line":734,"column":1,"offset":13095},"end":{"line":734,"column":11,"offset":13105}}}],"position":{"start":{"line":734,"column":1,"offset":13095},"end":{"line":734,"column":11,"offset":13105}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":736,"column":1,"offset":13107},"end":{"line":736,"column":8,"offset":13114}}}],"position":{"start":{"line":736,"column":1,"offset":13107},"end":{"line":736,"column":8,"offset":13114}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":738,"column":3,"offset":13118},"end":{"line":738,"column":6,"offset":13121}}}],"position":{"start":{"line":738,"column":1,"offset":13116},"end":{"line":738,"column":8,"offset":13123}}}],"position":{"start":{"line":738,"column":1,"offset":13116},"end":{"line":738,"column":8,"offset":13123}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：string；","position":{"start":{"line":740,"column":3,"offset":13127},"end":{"line":740,"column":16,"offset":13140}}}],"position":{"start":{"line":740,"column":1,"offset":13125},"end":{"line":740,"column":16,"offset":13140}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值表示当前的行为模式。","position":{"start":{"line":741,"column":3,"offset":13143},"end":{"line":741,"column":16,"offset":13156}}}],"position":{"start":{"line":741,"column":1,"offset":13141},"end":{"line":741,"column":16,"offset":13156}}},{"type":"text","value":"\n"}],"position":{"start":{"line":740,"column":1,"offset":13125},"end":{"line":741,"column":16,"offset":13156}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":743,"column":3,"offset":13160},"end":{"line":743,"column":5,"offset":13162}}}],"position":{"start":{"line":743,"column":1,"offset":13158},"end":{"line":743,"column":7,"offset":13164}}}],"position":{"start":{"line":743,"column":1,"offset":13158},"end":{"line":743,"column":7,"offset":13164}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 返回值mode表示当前的行为模式</span>\n<span class=\"token keyword\">const</span> mode <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getCurrentMode</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":744,"column":1,"offset":13165},"end":{"line":747,"column":4,"offset":13238}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getzoom"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getzoom","aria-label":"getzoom permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getZoom()","position":{"start":{"line":749,"column":5,"offset":13244},"end":{"line":749,"column":14,"offset":13253}}}],"position":{"start":{"line":749,"column":1,"offset":13240},"end":{"line":749,"column":14,"offset":13253}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取当前视口的缩放比例。","position":{"start":{"line":750,"column":1,"offset":13254},"end":{"line":750,"column":13,"offset":13266}}}],"position":{"start":{"line":750,"column":1,"offset":13254},"end":{"line":750,"column":13,"offset":13266}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":752,"column":1,"offset":13268},"end":{"line":752,"column":8,"offset":13275}}}],"position":{"start":{"line":752,"column":1,"offset":13268},"end":{"line":752,"column":8,"offset":13275}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":754,"column":3,"offset":13279},"end":{"line":754,"column":6,"offset":13282}}}],"position":{"start":{"line":754,"column":1,"offset":13277},"end":{"line":754,"column":8,"offset":13284}}}],"position":{"start":{"line":754,"column":1,"offset":13277},"end":{"line":754,"column":8,"offset":13284}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：number；","position":{"start":{"line":756,"column":3,"offset":13288},"end":{"line":756,"column":16,"offset":13301}}}],"position":{"start":{"line":756,"column":1,"offset":13286},"end":{"line":756,"column":16,"offset":13301}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值表示当前视口的缩放比例， 默认值为 1。","position":{"start":{"line":757,"column":3,"offset":13304},"end":{"line":757,"column":26,"offset":13327}}}],"position":{"start":{"line":757,"column":1,"offset":13302},"end":{"line":757,"column":26,"offset":13327}}},{"type":"text","value":"\n"}],"position":{"start":{"line":756,"column":1,"offset":13286},"end":{"line":757,"column":26,"offset":13327}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":759,"column":3,"offset":13331},"end":{"line":759,"column":5,"offset":13333}}}],"position":{"start":{"line":759,"column":1,"offset":13329},"end":{"line":759,"column":7,"offset":13335}}}],"position":{"start":{"line":759,"column":1,"offset":13329},"end":{"line":759,"column":7,"offset":13335}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 返回值zoom表示当前视口的缩放比例</span>\n<span class=\"token keyword\">const</span> zoom <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getZoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":760,"column":1,"offset":13336},"end":{"line":763,"column":4,"offset":13404}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoomratio-center"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoomratio-center","aria-label":"zoomratio center permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"zoom(ratio, center)","position":{"start":{"line":765,"column":5,"offset":13410},"end":{"line":765,"column":24,"offset":13429}}}],"position":{"start":{"line":765,"column":1,"offset":13406},"end":{"line":765,"column":24,"offset":13429}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"改变视口的缩放比例，在当前画布比例下缩放，是相对比例。","position":{"start":{"line":766,"column":1,"offset":13430},"end":{"line":766,"column":28,"offset":13457}}}],"position":{"start":{"line":766,"column":1,"offset":13430},"end":{"line":766,"column":28,"offset":13457}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":768,"column":3,"offset":13461},"end":{"line":768,"column":5,"offset":13463}}}],"position":{"start":{"line":768,"column":1,"offset":13459},"end":{"line":768,"column":7,"offset":13465}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| ratio | Number | true | 缩放比例 |\n| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 |","position":{"start":{"line":768,"column":7,"offset":13465},"end":{"line":772,"column":83,"offset":13631}}}],"position":{"start":{"line":768,"column":1,"offset":13459},"end":{"line":772,"column":83,"offset":13631}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":774,"column":3,"offset":13635},"end":{"line":774,"column":5,"offset":13637}}}],"position":{"start":{"line":774,"column":1,"offset":13633},"end":{"line":774,"column":7,"offset":13639}}}],"position":{"start":{"line":774,"column":1,"offset":13633},"end":{"line":774,"column":7,"offset":13639}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 以(100, 100)为中心点，放大3倍</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">zoom</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 以当前元素位置为中心，缩小到0.5</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">zoom</span><span class=\"token punctuation\">(</span><span class=\"token number\">0.5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":775,"column":1,"offset":13640},"end":{"line":781,"column":4,"offset":13754}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"zoomtotoratio-center"},"children":[{"type":"element","tagName":"a","properties":{"href":"#zoomtotoratio-center","aria-label":"zoomtotoratio center permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"zoomTo(toRatio, center)","position":{"start":{"line":783,"column":5,"offset":13760},"end":{"line":783,"column":28,"offset":13783}}}],"position":{"start":{"line":783,"column":1,"offset":13756},"end":{"line":783,"column":28,"offset":13783}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"缩放视窗窗口到一个固定比例。","position":{"start":{"line":784,"column":1,"offset":13784},"end":{"line":784,"column":15,"offset":13798}}}],"position":{"start":{"line":784,"column":1,"offset":13784},"end":{"line":784,"column":15,"offset":13798}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":786,"column":3,"offset":13802},"end":{"line":786,"column":5,"offset":13804}}}],"position":{"start":{"line":786,"column":1,"offset":13800},"end":{"line":786,"column":7,"offset":13806}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| toRatio | Number | true | 固定比例值 |\n| center | Object | false | 以 center 的 x、y 坐标为中心缩放，如果省略了 center 参数，则以元素当前位置为中心缩放 |","position":{"start":{"line":786,"column":7,"offset":13806},"end":{"line":790,"column":83,"offset":13975}}}],"position":{"start":{"line":786,"column":1,"offset":13800},"end":{"line":790,"column":83,"offset":13975}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":793,"column":3,"offset":13980},"end":{"line":793,"column":5,"offset":13982}}}],"position":{"start":{"line":793,"column":1,"offset":13978},"end":{"line":793,"column":7,"offset":13984}}}],"position":{"start":{"line":793,"column":1,"offset":13978},"end":{"line":793,"column":7,"offset":13984}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 以(100, 100)为中心点，放大3倍</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">zoomTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> x<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> y<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 以当前元素位置为中心，缩小到0.5</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">zoomTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">0.5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":794,"column":1,"offset":13985},"end":{"line":800,"column":4,"offset":14103}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"focusitemitem"},"children":[{"type":"element","tagName":"a","properties":{"href":"#focusitemitem","aria-label":"focusitemitem permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"focusItem(item)","position":{"start":{"line":802,"column":5,"offset":14109},"end":{"line":802,"column":20,"offset":14124}}}],"position":{"start":{"line":802,"column":1,"offset":14105},"end":{"line":802,"column":20,"offset":14124}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将元素移动到视口中心，该方法可用于做搜索后的缓动动画。","position":{"start":{"line":803,"column":1,"offset":14125},"end":{"line":803,"column":28,"offset":14152}}}],"position":{"start":{"line":803,"column":1,"offset":14125},"end":{"line":803,"column":28,"offset":14152}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":805,"column":3,"offset":14156},"end":{"line":805,"column":5,"offset":14158}}}],"position":{"start":{"line":805,"column":1,"offset":14154},"end":{"line":805,"column":7,"offset":14160}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| item | String | Object | true | 元素 ID 或元素实例 |","position":{"start":{"line":805,"column":7,"offset":14160},"end":{"line":808,"column":48,"offset":14258}}}],"position":{"start":{"line":805,"column":1,"offset":14154},"end":{"line":808,"column":48,"offset":14258}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":811,"column":3,"offset":14263},"end":{"line":811,"column":5,"offset":14265}}}],"position":{"start":{"line":811,"column":1,"offset":14261},"end":{"line":811,"column":7,"offset":14267}}}],"position":{"start":{"line":811,"column":1,"offset":14261},"end":{"line":811,"column":7,"offset":14267}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">focusItem</span><span class=\"token punctuation\">(</span>item<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":812,"column":1,"offset":14268},"end":{"line":814,"column":4,"offset":14307}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"changesizewidth-height"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changesizewidth-height","aria-label":"changesizewidth height permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"changeSize(width, height)","position":{"start":{"line":816,"column":5,"offset":14313},"end":{"line":816,"column":30,"offset":14338}}}],"position":{"start":{"line":816,"column":1,"offset":14309},"end":{"line":816,"column":30,"offset":14338}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"改变画布大小。","position":{"start":{"line":817,"column":1,"offset":14339},"end":{"line":817,"column":8,"offset":14346}}}],"position":{"start":{"line":817,"column":1,"offset":14339},"end":{"line":817,"column":8,"offset":14346}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":819,"column":3,"offset":14350},"end":{"line":819,"column":5,"offset":14352}}}],"position":{"start":{"line":819,"column":1,"offset":14348},"end":{"line":819,"column":7,"offset":14354}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| width | Number | true | 画布宽度 |\n| height | Number | true | 画布高度 |","position":{"start":{"line":819,"column":7,"offset":14354},"end":{"line":823,"column":34,"offset":14471}}}],"position":{"start":{"line":819,"column":1,"offset":14348},"end":{"line":823,"column":34,"offset":14471}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":826,"column":3,"offset":14476},"end":{"line":826,"column":5,"offset":14478}}}],"position":{"start":{"line":826,"column":1,"offset":14474},"end":{"line":826,"column":7,"offset":14480}}}],"position":{"start":{"line":826,"column":1,"offset":14474},"end":{"line":826,"column":7,"offset":14480}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">changeSize</span><span class=\"token punctuation\">(</span><span class=\"token number\">600</span><span class=\"token punctuation\">,</span> <span class=\"token number\">350</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":827,"column":1,"offset":14481},"end":{"line":829,"column":4,"offset":14525}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"translatedx-dy"},"children":[{"type":"element","tagName":"a","properties":{"href":"#translatedx-dy","aria-label":"translatedx dy permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"translate(dx, dy)","position":{"start":{"line":831,"column":5,"offset":14531},"end":{"line":831,"column":22,"offset":14548}}}],"position":{"start":{"line":831,"column":1,"offset":14527},"end":{"line":831,"column":22,"offset":14548}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"采用","position":{"start":{"line":832,"column":1,"offset":14549},"end":{"line":832,"column":3,"offset":14551}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"相对位移","position":{"start":{"line":832,"column":5,"offset":14553},"end":{"line":832,"column":9,"offset":14557}}}],"position":{"start":{"line":832,"column":3,"offset":14551},"end":{"line":832,"column":11,"offset":14559}}},{"type":"text","value":"来平移画布。","position":{"start":{"line":832,"column":11,"offset":14559},"end":{"line":832,"column":17,"offset":14565}}}],"position":{"start":{"line":832,"column":1,"offset":14549},"end":{"line":832,"column":17,"offset":14565}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":834,"column":3,"offset":14569},"end":{"line":834,"column":5,"offset":14571}}}],"position":{"start":{"line":834,"column":1,"offset":14567},"end":{"line":834,"column":7,"offset":14573}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| dx | Number | true | 水平方向位移 |\n| dy | Number | true | 垂直方向位移 |","position":{"start":{"line":834,"column":7,"offset":14573},"end":{"line":838,"column":32,"offset":14687}}}],"position":{"start":{"line":834,"column":1,"offset":14567},"end":{"line":838,"column":32,"offset":14687}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":841,"column":3,"offset":14692},"end":{"line":841,"column":5,"offset":14694}}}],"position":{"start":{"line":841,"column":1,"offset":14690},"end":{"line":841,"column":7,"offset":14696}}}],"position":{"start":{"line":841,"column":1,"offset":14690},"end":{"line":841,"column":7,"offset":14696}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">translate</span><span class=\"token punctuation\">(</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">100</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":842,"column":1,"offset":14697},"end":{"line":844,"column":4,"offset":14741}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"movetox-y"},"children":[{"type":"element","tagName":"a","properties":{"href":"#movetox-y","aria-label":"movetox y permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"moveTo(x, y)","position":{"start":{"line":846,"column":5,"offset":14747},"end":{"line":846,"column":17,"offset":14759}}}],"position":{"start":{"line":846,"column":1,"offset":14743},"end":{"line":846,"column":17,"offset":14759}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"采用","position":{"start":{"line":847,"column":1,"offset":14760},"end":{"line":847,"column":3,"offset":14762}}},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"绝对位移","position":{"start":{"line":847,"column":5,"offset":14764},"end":{"line":847,"column":9,"offset":14768}}}],"position":{"start":{"line":847,"column":3,"offset":14762},"end":{"line":847,"column":11,"offset":14770}}},{"type":"text","value":"将画布移动到指定坐标。","position":{"start":{"line":847,"column":11,"offset":14770},"end":{"line":847,"column":22,"offset":14781}}}],"position":{"start":{"line":847,"column":1,"offset":14760},"end":{"line":847,"column":22,"offset":14781}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":849,"column":3,"offset":14785},"end":{"line":849,"column":5,"offset":14787}}}],"position":{"start":{"line":849,"column":1,"offset":14783},"end":{"line":849,"column":7,"offset":14789}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 水平方向坐标 |\n| y | Number | true | 垂直方向坐标 |","position":{"start":{"line":849,"column":7,"offset":14789},"end":{"line":853,"column":31,"offset":14901}}}],"position":{"start":{"line":849,"column":1,"offset":14783},"end":{"line":853,"column":31,"offset":14901}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":856,"column":3,"offset":14906},"end":{"line":856,"column":5,"offset":14908}}}],"position":{"start":{"line":856,"column":1,"offset":14904},"end":{"line":856,"column":7,"offset":14910}}}],"position":{"start":{"line":856,"column":1,"offset":14904},"end":{"line":856,"column":7,"offset":14910}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">moveTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">200</span><span class=\"token punctuation\">,</span> <span class=\"token number\">300</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":857,"column":1,"offset":14911},"end":{"line":859,"column":4,"offset":14951}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"fitviewpadding"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fitviewpadding","aria-label":"fitviewpadding permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"fitView(padding)","position":{"start":{"line":861,"column":5,"offset":14957},"end":{"line":861,"column":21,"offset":14973}}}],"position":{"start":{"line":861,"column":1,"offset":14953},"end":{"line":861,"column":21,"offset":14973}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"让画布内容适应视口。","position":{"start":{"line":862,"column":1,"offset":14974},"end":{"line":862,"column":11,"offset":14984}}}],"position":{"start":{"line":862,"column":1,"offset":14974},"end":{"line":862,"column":11,"offset":14984}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":864,"column":3,"offset":14988},"end":{"line":864,"column":5,"offset":14990}}}],"position":{"start":{"line":864,"column":1,"offset":14986},"end":{"line":864,"column":7,"offset":14992}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| padding | Number | Array | false | ","position":{"start":{"line":864,"column":7,"offset":14992},"end":{"line":867,"column":38,"offset":15080}}},{"type":"text","value":"[top, right, bottom, left]","position":{"start":{"line":867,"column":39,"offset":15081},"end":{"line":867,"column":63,"offset":15105}}},{"type":"text","value":" 四个方向上的间距值 |","position":{"start":{"line":867,"column":64,"offset":15106},"end":{"line":867,"column":76,"offset":15118}}}],"position":{"start":{"line":864,"column":1,"offset":14986},"end":{"line":867,"column":76,"offset":15118}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":870,"column":3,"offset":15123},"end":{"line":870,"column":5,"offset":15125}}}],"position":{"start":{"line":870,"column":1,"offset":15121},"end":{"line":870,"column":7,"offset":15127}}}],"position":{"start":{"line":870,"column":1,"offset":15121},"end":{"line":870,"column":7,"offset":15127}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// padding只设置为一个值，则表示top = right = bottom = left = 20</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">fitView</span><span class=\"token punctuation\">(</span><span class=\"token number\">20</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 等价于graph.fitView(20)</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">fitView</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">20</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// padding设置为数组，只传2个值，则top = bottom = 20, right = left = 10</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">fitView</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// padding设置为数组，四个方向值都指定</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">fitView</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token number\">10</span><span class=\"token punctuation\">,</span> <span class=\"token number\">20</span><span class=\"token punctuation\">,</span> <span class=\"token number\">15</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":871,"column":1,"offset":15128},"end":{"line":883,"column":4,"offset":15405}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"查找"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%9F%A5%E6%89%BE","aria-label":"查找 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"查找","position":{"start":{"line":885,"column":4,"offset":15410},"end":{"line":885,"column":6,"offset":15412}}}],"position":{"start":{"line":885,"column":1,"offset":15407},"end":{"line":885,"column":6,"offset":15412}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"findtype-fn"},"children":[{"type":"element","tagName":"a","properties":{"href":"#findtype-fn","aria-label":"findtype fn permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"find(type, fn)","position":{"start":{"line":886,"column":5,"offset":15417},"end":{"line":886,"column":19,"offset":15431}}}],"position":{"start":{"line":886,"column":1,"offset":15413},"end":{"line":886,"column":19,"offset":15431}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据具体规则查找单个元素。","position":{"start":{"line":887,"column":1,"offset":15432},"end":{"line":887,"column":14,"offset":15445}}}],"position":{"start":{"line":887,"column":1,"offset":15432},"end":{"line":887,"column":14,"offset":15445}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":889,"column":3,"offset":15449},"end":{"line":889,"column":5,"offset":15451}}}],"position":{"start":{"line":889,"column":1,"offset":15447},"end":{"line":889,"column":7,"offset":15453}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| fn | Function | true | 查找的规则 |","position":{"start":{"line":889,"column":7,"offset":15453},"end":{"line":893,"column":33,"offset":15583}}}],"position":{"start":{"line":889,"column":1,"offset":15447},"end":{"line":893,"column":33,"offset":15583}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":896,"column":3,"offset":15588},"end":{"line":896,"column":6,"offset":15591}}}],"position":{"start":{"line":896,"column":1,"offset":15586},"end":{"line":896,"column":8,"offset":15593}}}],"position":{"start":{"line":896,"column":1,"offset":15586},"end":{"line":896,"column":8,"offset":15593}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":898,"column":3,"offset":15597},"end":{"line":898,"column":16,"offset":15610}}}],"position":{"start":{"line":898,"column":1,"offset":15595},"end":{"line":898,"column":16,"offset":15610}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"如果有符合规则的元素实例，则返回第一个匹配的元素实例，否则返回 ","position":{"start":{"line":899,"column":3,"offset":15613},"end":{"line":899,"column":35,"offset":15645}}},{"type":"raw","value":"<code class=\"language-text\">undefined</code>","position":{"start":{"line":899,"column":35,"offset":15645},"end":{"line":899,"column":46,"offset":15656}}},{"type":"text","value":" 。","position":{"start":{"line":899,"column":46,"offset":15656},"end":{"line":899,"column":48,"offset":15658}}}],"position":{"start":{"line":899,"column":1,"offset":15611},"end":{"line":899,"column":48,"offset":15658}}},{"type":"text","value":"\n"}],"position":{"start":{"line":898,"column":1,"offset":15595},"end":{"line":899,"column":48,"offset":15658}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":901,"column":3,"offset":15662},"end":{"line":901,"column":5,"offset":15664}}}],"position":{"start":{"line":901,"column":1,"offset":15660},"end":{"line":901,"column":7,"offset":15666}}}],"position":{"start":{"line":901,"column":1,"offset":15660},"end":{"line":901,"column":7,"offset":15666}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> findNode <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">find</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</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\">return</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'model'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>x <span class=\"token operator\">===</span> <span class=\"token number\">100</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":902,"column":1,"offset":15667},"end":{"line":906,"column":4,"offset":15772}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"findbyidid"},"children":[{"type":"element","tagName":"a","properties":{"href":"#findbyidid","aria-label":"findbyidid permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"findById(id)","position":{"start":{"line":908,"column":5,"offset":15778},"end":{"line":908,"column":17,"offset":15790}}}],"position":{"start":{"line":908,"column":1,"offset":15774},"end":{"line":908,"column":17,"offset":15790}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据 ID，查询对应的元素实例。","position":{"start":{"line":909,"column":1,"offset":15791},"end":{"line":909,"column":17,"offset":15807}}}],"position":{"start":{"line":909,"column":1,"offset":15791},"end":{"line":909,"column":17,"offset":15807}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":911,"column":3,"offset":15811},"end":{"line":911,"column":5,"offset":15813}}}],"position":{"start":{"line":911,"column":1,"offset":15809},"end":{"line":911,"column":7,"offset":15815}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| id | String | true | 元素 ID |","position":{"start":{"line":911,"column":7,"offset":15815},"end":{"line":914,"column":31,"offset":15896}}}],"position":{"start":{"line":911,"column":1,"offset":15809},"end":{"line":914,"column":31,"offset":15896}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":917,"column":3,"offset":15901},"end":{"line":917,"column":6,"offset":15904}}}],"position":{"start":{"line":917,"column":1,"offset":15899},"end":{"line":917,"column":8,"offset":15906}}}],"position":{"start":{"line":917,"column":1,"offset":15899},"end":{"line":917,"column":8,"offset":15906}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":919,"column":3,"offset":15910},"end":{"line":919,"column":16,"offset":15923}}}],"position":{"start":{"line":919,"column":1,"offset":15908},"end":{"line":919,"column":16,"offset":15923}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"如果有符合规则的元素实例，则返回该元素实例，否则返回 ","position":{"start":{"line":920,"column":3,"offset":15926},"end":{"line":920,"column":30,"offset":15953}}},{"type":"raw","value":"<code class=\"language-text\">undefined</code>","position":{"start":{"line":920,"column":30,"offset":15953},"end":{"line":920,"column":41,"offset":15964}}},{"type":"text","value":"。","position":{"start":{"line":920,"column":41,"offset":15964},"end":{"line":920,"column":42,"offset":15965}}}],"position":{"start":{"line":920,"column":1,"offset":15924},"end":{"line":920,"column":42,"offset":15965}}},{"type":"text","value":"\n"}],"position":{"start":{"line":919,"column":1,"offset":15908},"end":{"line":920,"column":42,"offset":15965}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":922,"column":3,"offset":15969},"end":{"line":922,"column":5,"offset":15971}}}],"position":{"start":{"line":922,"column":1,"offset":15967},"end":{"line":922,"column":7,"offset":15973}}}],"position":{"start":{"line":922,"column":1,"offset":15967},"end":{"line":922,"column":7,"offset":15973}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> node <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":923,"column":1,"offset":15974},"end":{"line":925,"column":4,"offset":16027}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"findalltype-fn"},"children":[{"type":"element","tagName":"a","properties":{"href":"#findalltype-fn","aria-label":"findalltype fn permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"findAll(type, fn)","position":{"start":{"line":927,"column":5,"offset":16033},"end":{"line":927,"column":22,"offset":16050}}}],"position":{"start":{"line":927,"column":1,"offset":16029},"end":{"line":927,"column":22,"offset":16050}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"查询所有满足规则的元素。","position":{"start":{"line":928,"column":1,"offset":16051},"end":{"line":928,"column":13,"offset":16063}}}],"position":{"start":{"line":928,"column":1,"offset":16051},"end":{"line":928,"column":13,"offset":16063}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":930,"column":3,"offset":16067},"end":{"line":930,"column":5,"offset":16069}}}],"position":{"start":{"line":930,"column":1,"offset":16065},"end":{"line":930,"column":7,"offset":16071}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| fn | Function | true | 查找的规则 |","position":{"start":{"line":930,"column":7,"offset":16071},"end":{"line":934,"column":33,"offset":16201}}}],"position":{"start":{"line":930,"column":1,"offset":16065},"end":{"line":934,"column":33,"offset":16201}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":937,"column":3,"offset":16206},"end":{"line":937,"column":6,"offset":16209}}}],"position":{"start":{"line":937,"column":1,"offset":16204},"end":{"line":937,"column":8,"offset":16211}}}],"position":{"start":{"line":937,"column":1,"offset":16204},"end":{"line":937,"column":8,"offset":16211}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Array；","position":{"start":{"line":939,"column":3,"offset":16215},"end":{"line":939,"column":15,"offset":16227}}}],"position":{"start":{"line":939,"column":1,"offset":16213},"end":{"line":939,"column":15,"offset":16227}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"如果有符合规则的元素实例，则返回所有元素实例，否则返回 ","position":{"start":{"line":940,"column":3,"offset":16230},"end":{"line":940,"column":31,"offset":16258}}},{"type":"raw","value":"<code class=\"language-text\">undefined</code>","position":{"start":{"line":940,"column":31,"offset":16258},"end":{"line":940,"column":42,"offset":16269}}},{"type":"text","value":"。","position":{"start":{"line":940,"column":42,"offset":16269},"end":{"line":940,"column":43,"offset":16270}}}],"position":{"start":{"line":940,"column":1,"offset":16228},"end":{"line":940,"column":43,"offset":16270}}},{"type":"text","value":"\n"}],"position":{"start":{"line":939,"column":1,"offset":16213},"end":{"line":940,"column":43,"offset":16270}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":942,"column":3,"offset":16274},"end":{"line":942,"column":5,"offset":16276}}}],"position":{"start":{"line":942,"column":1,"offset":16272},"end":{"line":942,"column":7,"offset":16278}}}],"position":{"start":{"line":942,"column":1,"offset":16272},"end":{"line":942,"column":7,"offset":16278}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">findAll</span><span class=\"token punctuation\">(</span><span class=\"token string\">'node'</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\">return</span> node<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'model'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span>x<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":943,"column":1,"offset":16279},"end":{"line":947,"column":4,"offset":16376}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"findallbystatetype-state"},"children":[{"type":"element","tagName":"a","properties":{"href":"#findallbystatetype-state","aria-label":"findallbystatetype state permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"findAllByState(type, state)","position":{"start":{"line":949,"column":5,"offset":16382},"end":{"line":949,"column":32,"offset":16409}}}],"position":{"start":{"line":949,"column":1,"offset":16378},"end":{"line":949,"column":32,"offset":16409}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"查找所有处于指定状态的元素。","position":{"start":{"line":950,"column":1,"offset":16410},"end":{"line":950,"column":15,"offset":16424}}}],"position":{"start":{"line":950,"column":1,"offset":16410},"end":{"line":950,"column":15,"offset":16424}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":952,"column":3,"offset":16428},"end":{"line":952,"column":5,"offset":16430}}}],"position":{"start":{"line":952,"column":1,"offset":16426},"end":{"line":952,"column":7,"offset":16432}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| type | String | true | 元素类型，可选值为 node、edge |\n| state | String | true | 状态 |","position":{"start":{"line":952,"column":7,"offset":16432},"end":{"line":956,"column":31,"offset":16560}}}],"position":{"start":{"line":952,"column":1,"offset":16426},"end":{"line":956,"column":31,"offset":16560}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":959,"column":3,"offset":16565},"end":{"line":959,"column":6,"offset":16568}}}],"position":{"start":{"line":959,"column":1,"offset":16563},"end":{"line":959,"column":8,"offset":16570}}}],"position":{"start":{"line":959,"column":1,"offset":16563},"end":{"line":959,"column":8,"offset":16570}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Array；","position":{"start":{"line":961,"column":3,"offset":16574},"end":{"line":961,"column":15,"offset":16586}}}],"position":{"start":{"line":961,"column":1,"offset":16572},"end":{"line":961,"column":15,"offset":16586}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回所有指定状态的元素实例。","position":{"start":{"line":962,"column":3,"offset":16589},"end":{"line":962,"column":17,"offset":16603}}}],"position":{"start":{"line":962,"column":1,"offset":16587},"end":{"line":962,"column":17,"offset":16603}}},{"type":"text","value":"\n"}],"position":{"start":{"line":961,"column":1,"offset":16572},"end":{"line":962,"column":17,"offset":16603}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":964,"column":3,"offset":16607},"end":{"line":964,"column":5,"offset":16609}}}],"position":{"start":{"line":964,"column":1,"offset":16605},"end":{"line":964,"column":7,"offset":16611}}}],"position":{"start":{"line":964,"column":1,"offset":16605},"end":{"line":964,"column":7,"offset":16611}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 查询所有选中的元素</span>\n<span class=\"token keyword\">const</span> nodes <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\">'selected'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":965,"column":1,"offset":16612},"end":{"line":968,"column":4,"offset":16698}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"数据"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%95%B0%E6%8D%AE","aria-label":"数据 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"数据","position":{"start":{"line":970,"column":4,"offset":16703},"end":{"line":970,"column":6,"offset":16705}}}],"position":{"start":{"line":970,"column":1,"offset":16700},"end":{"line":970,"column":6,"offset":16705}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"save"},"children":[{"type":"element","tagName":"a","properties":{"href":"#save","aria-label":"save permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"save()","position":{"start":{"line":971,"column":5,"offset":16710},"end":{"line":971,"column":11,"offset":16716}}}],"position":{"start":{"line":971,"column":1,"offset":16706},"end":{"line":971,"column":11,"offset":16716}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取图数据。","position":{"start":{"line":972,"column":1,"offset":16717},"end":{"line":972,"column":7,"offset":16723}}}],"position":{"start":{"line":972,"column":1,"offset":16717},"end":{"line":972,"column":7,"offset":16723}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":974,"column":1,"offset":16725},"end":{"line":974,"column":8,"offset":16732}}}],"position":{"start":{"line":974,"column":1,"offset":16725},"end":{"line":974,"column":8,"offset":16732}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":976,"column":3,"offset":16736},"end":{"line":976,"column":6,"offset":16739}}}],"position":{"start":{"line":976,"column":1,"offset":16734},"end":{"line":976,"column":8,"offset":16741}}}],"position":{"start":{"line":976,"column":1,"offset":16734},"end":{"line":976,"column":8,"offset":16741}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":978,"column":3,"offset":16745},"end":{"line":978,"column":16,"offset":16758}}}],"position":{"start":{"line":978,"column":1,"offset":16743},"end":{"line":978,"column":16,"offset":16758}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"返回值包括所有节点和边，数据结构如下下所示：","position":{"start":{"line":979,"column":3,"offset":16761},"end":{"line":979,"column":25,"offset":16783}}}],"position":{"start":{"line":979,"column":3,"offset":16761},"end":{"line":979,"column":25,"offset":16783}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token punctuation\">{</span>\nnodes<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\nedges<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\ngroups<span class=\"token punctuation\">:</span> <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":980,"column":1,"offset":16784},"end":{"line":986,"column":4,"offset":16844}}},{"type":"text","value":"\n"}],"position":{"start":{"line":979,"column":1,"offset":16759},"end":{"line":986,"column":4,"offset":16844}}},{"type":"text","value":"\n"}],"position":{"start":{"line":978,"column":1,"offset":16743},"end":{"line":986,"column":4,"offset":16844}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":988,"column":3,"offset":16848},"end":{"line":988,"column":5,"offset":16850}}}],"position":{"start":{"line":988,"column":1,"offset":16846},"end":{"line":988,"column":7,"offset":16852}}}],"position":{"start":{"line":988,"column":1,"offset":16846},"end":{"line":988,"column":7,"offset":16852}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">save</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":989,"column":1,"offset":16853},"end":{"line":991,"column":4,"offset":16883}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getnodes"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getnodes","aria-label":"getnodes permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getNodes()","position":{"start":{"line":993,"column":5,"offset":16889},"end":{"line":993,"column":15,"offset":16899}}}],"position":{"start":{"line":993,"column":1,"offset":16885},"end":{"line":993,"column":15,"offset":16899}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取图中所有节点的实例。","position":{"start":{"line":994,"column":1,"offset":16900},"end":{"line":994,"column":13,"offset":16912}}}],"position":{"start":{"line":994,"column":1,"offset":16900},"end":{"line":994,"column":13,"offset":16912}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"注意：这里返回的是节点的实例，而不是节点的数据项。","position":{"start":{"line":996,"column":1,"offset":16914},"end":{"line":996,"column":26,"offset":16939}}}],"position":{"start":{"line":996,"column":1,"offset":16914},"end":{"line":996,"column":26,"offset":16939}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":998,"column":3,"offset":16943},"end":{"line":998,"column":6,"offset":16946}}}],"position":{"start":{"line":998,"column":1,"offset":16941},"end":{"line":998,"column":8,"offset":16948}}}],"position":{"start":{"line":998,"column":1,"offset":16941},"end":{"line":998,"column":8,"offset":16948}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Array；","position":{"start":{"line":1000,"column":3,"offset":16952},"end":{"line":1000,"column":15,"offset":16964}}}],"position":{"start":{"line":1000,"column":1,"offset":16950},"end":{"line":1000,"column":15,"offset":16964}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值表示图中所有节点的实例。","position":{"start":{"line":1001,"column":3,"offset":16967},"end":{"line":1001,"column":18,"offset":16982}}}],"position":{"start":{"line":1001,"column":1,"offset":16965},"end":{"line":1001,"column":18,"offset":16982}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1000,"column":1,"offset":16950},"end":{"line":1001,"column":18,"offset":16982}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1003,"column":3,"offset":16986},"end":{"line":1003,"column":5,"offset":16988}}}],"position":{"start":{"line":1003,"column":1,"offset":16984},"end":{"line":1003,"column":7,"offset":16990}}}],"position":{"start":{"line":1003,"column":1,"offset":16984},"end":{"line":1003,"column":7,"offset":16990}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> nodes <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getNodes</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1004,"column":1,"offset":16991},"end":{"line":1006,"column":4,"offset":17039}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getedges"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getedges","aria-label":"getedges permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getEdges()","position":{"start":{"line":1008,"column":5,"offset":17045},"end":{"line":1008,"column":15,"offset":17055}}}],"position":{"start":{"line":1008,"column":1,"offset":17041},"end":{"line":1008,"column":15,"offset":17055}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"获取图中所有边的实例。","position":{"start":{"line":1009,"column":1,"offset":17056},"end":{"line":1009,"column":12,"offset":17067}}}],"position":{"start":{"line":1009,"column":1,"offset":17056},"end":{"line":1009,"column":12,"offset":17067}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"注意：这里返回的是边的实例，而不是边的数据项。","position":{"start":{"line":1011,"column":1,"offset":17069},"end":{"line":1011,"column":24,"offset":17092}}}],"position":{"start":{"line":1011,"column":1,"offset":17069},"end":{"line":1011,"column":24,"offset":17092}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":1013,"column":3,"offset":17096},"end":{"line":1013,"column":6,"offset":17099}}}],"position":{"start":{"line":1013,"column":1,"offset":17094},"end":{"line":1013,"column":8,"offset":17101}}}],"position":{"start":{"line":1013,"column":1,"offset":17094},"end":{"line":1013,"column":8,"offset":17101}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Array；","position":{"start":{"line":1015,"column":3,"offset":17105},"end":{"line":1015,"column":15,"offset":17117}}}],"position":{"start":{"line":1015,"column":1,"offset":17103},"end":{"line":1015,"column":15,"offset":17117}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值表示图中所有边的实例。","position":{"start":{"line":1016,"column":3,"offset":17120},"end":{"line":1016,"column":17,"offset":17134}}}],"position":{"start":{"line":1016,"column":1,"offset":17118},"end":{"line":1016,"column":17,"offset":17134}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1015,"column":1,"offset":17103},"end":{"line":1016,"column":17,"offset":17134}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1018,"column":3,"offset":17138},"end":{"line":1018,"column":5,"offset":17140}}}],"position":{"start":{"line":1018,"column":1,"offset":17136},"end":{"line":1018,"column":7,"offset":17142}}}],"position":{"start":{"line":1018,"column":1,"offset":17136},"end":{"line":1018,"column":7,"offset":17142}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> edges <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getEdges</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1019,"column":1,"offset":17143},"end":{"line":1021,"column":4,"offset":17191}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"坐标转换"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%9D%90%E6%A0%87%E8%BD%AC%E6%8D%A2","aria-label":"坐标转换 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"坐标转换","position":{"start":{"line":1023,"column":4,"offset":17196},"end":{"line":1023,"column":8,"offset":17200}}}],"position":{"start":{"line":1023,"column":1,"offset":17193},"end":{"line":1023,"column":8,"offset":17200}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"这部分主要是说明视口坐标、Canvas 坐标和页面坐标之前的相互转换。其中视口坐标和 Canvas 坐标的示意图如下所示。","position":{"start":{"line":1024,"column":1,"offset":17201},"end":{"line":1024,"column":62,"offset":17262}}},{"type":"raw","value":"<br />","position":{"start":{"line":1024,"column":62,"offset":17262},"end":{"line":1024,"column":68,"offset":17268}}},{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/png/244306/1561032531743-bd0ad563-e0e3-47ec-912b-8d95d200aee6.png#align=left&display=inline&height=535&name=image.png&originHeight=1070&originWidth=1128&search=&size=320637&status=done&width=564","alt":"image.png"},"children":[],"position":{"start":{"line":1024,"column":68,"offset":17268},"end":{"line":1024,"column":311,"offset":17511}}}],"position":{"start":{"line":1024,"column":1,"offset":17201},"end":{"line":1024,"column":311,"offset":17511}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getpointbyclientclientx-clienty"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getpointbyclientclientx-clienty","aria-label":"getpointbyclientclientx clienty permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getPointByClient(clientX, clientY)","position":{"start":{"line":1025,"column":5,"offset":17516},"end":{"line":1025,"column":39,"offset":17550}}}],"position":{"start":{"line":1025,"column":1,"offset":17512},"end":{"line":1025,"column":39,"offset":17550}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将屏幕/页面坐标转换为视口坐标。","position":{"start":{"line":1026,"column":1,"offset":17551},"end":{"line":1026,"column":17,"offset":17567}}}],"position":{"start":{"line":1026,"column":1,"offset":17551},"end":{"line":1026,"column":17,"offset":17567}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1028,"column":3,"offset":17571},"end":{"line":1028,"column":5,"offset":17573}}}],"position":{"start":{"line":1028,"column":1,"offset":17569},"end":{"line":1028,"column":7,"offset":17575}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| clientX | Number | true | 屏幕 x 坐标 |\n| clientY | Number | true | 屏幕 y 坐标 |","position":{"start":{"line":1028,"column":7,"offset":17575},"end":{"line":1032,"column":38,"offset":17701}}}],"position":{"start":{"line":1028,"column":1,"offset":17569},"end":{"line":1032,"column":38,"offset":17701}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":1035,"column":3,"offset":17706},"end":{"line":1035,"column":6,"offset":17709}}}],"position":{"start":{"line":1035,"column":1,"offset":17704},"end":{"line":1035,"column":8,"offset":17711}}}],"position":{"start":{"line":1035,"column":1,"offset":17704},"end":{"line":1035,"column":8,"offset":17711}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":1037,"column":3,"offset":17715},"end":{"line":1037,"column":16,"offset":17728}}}],"position":{"start":{"line":1037,"column":1,"offset":17713},"end":{"line":1037,"column":16,"offset":17728}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"包含的属性：x 和 y 属性，分别表示视口的 x 、y 坐标。","position":{"start":{"line":1038,"column":3,"offset":17731},"end":{"line":1038,"column":34,"offset":17762}}}],"position":{"start":{"line":1038,"column":1,"offset":17729},"end":{"line":1038,"column":34,"offset":17762}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1037,"column":1,"offset":17713},"end":{"line":1038,"column":34,"offset":17762}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1040,"column":3,"offset":17766},"end":{"line":1040,"column":5,"offset":17768}}}],"position":{"start":{"line":1040,"column":1,"offset":17764},"end":{"line":1040,"column":7,"offset":17770}}}],"position":{"start":{"line":1040,"column":1,"offset":17764},"end":{"line":1040,"column":7,"offset":17770}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getPointByClient</span><span class=\"token punctuation\">(</span>e<span class=\"token punctuation\">.</span>clientX<span class=\"token punctuation\">,</span> e<span class=\"token punctuation\">.</span>clientY<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'视口x/y坐标分别为:'</span><span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1041,"column":1,"offset":17771},"end":{"line":1044,"column":4,"offset":17893}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getclientbypointx-y"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getclientbypointx-y","aria-label":"getclientbypointx y permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getClientByPoint(x, y)","position":{"start":{"line":1046,"column":5,"offset":17899},"end":{"line":1046,"column":27,"offset":17921}}}],"position":{"start":{"line":1046,"column":1,"offset":17895},"end":{"line":1046,"column":27,"offset":17921}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将视口坐标转换为屏幕/页面坐标。","position":{"start":{"line":1047,"column":1,"offset":17922},"end":{"line":1047,"column":17,"offset":17938}}}],"position":{"start":{"line":1047,"column":1,"offset":17922},"end":{"line":1047,"column":17,"offset":17938}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1049,"column":3,"offset":17942},"end":{"line":1049,"column":5,"offset":17944}}}],"position":{"start":{"line":1049,"column":1,"offset":17940},"end":{"line":1049,"column":7,"offset":17946}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 视口 x 坐标 |\n| y | Number | true | 视口 y 坐标 |","position":{"start":{"line":1049,"column":7,"offset":17946},"end":{"line":1053,"column":32,"offset":18060}}}],"position":{"start":{"line":1049,"column":1,"offset":17940},"end":{"line":1053,"column":32,"offset":18060}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":1056,"column":3,"offset":18065},"end":{"line":1056,"column":6,"offset":18068}}}],"position":{"start":{"line":1056,"column":1,"offset":18063},"end":{"line":1056,"column":8,"offset":18070}}}],"position":{"start":{"line":1056,"column":1,"offset":18063},"end":{"line":1056,"column":8,"offset":18070}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":1058,"column":3,"offset":18074},"end":{"line":1058,"column":16,"offset":18087}}}],"position":{"start":{"line":1058,"column":1,"offset":18072},"end":{"line":1058,"column":16,"offset":18087}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"包含的属性：x 和 y 属性，分别表示屏幕/页面的 x、y 坐标。","position":{"start":{"line":1059,"column":3,"offset":18090},"end":{"line":1059,"column":36,"offset":18123}}}],"position":{"start":{"line":1059,"column":1,"offset":18088},"end":{"line":1059,"column":36,"offset":18123}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1058,"column":1,"offset":18072},"end":{"line":1059,"column":36,"offset":18123}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1061,"column":3,"offset":18127},"end":{"line":1061,"column":5,"offset":18129}}}],"position":{"start":{"line":1061,"column":1,"offset":18125},"end":{"line":1061,"column":7,"offset":18131}}}],"position":{"start":{"line":1061,"column":1,"offset":18125},"end":{"line":1061,"column":7,"offset":18131}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getClientByPoint</span><span class=\"token punctuation\">(</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">200</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'屏幕/页面x/y坐标分别为:'</span><span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1062,"column":1,"offset":18132},"end":{"line":1065,"column":4,"offset":18245}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getpointbycanvascanvasx-canvasy"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getpointbycanvascanvasx-canvasy","aria-label":"getpointbycanvascanvasx canvasy permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getPointByCanvas(canvasX, canvasY)","position":{"start":{"line":1067,"column":5,"offset":18251},"end":{"line":1067,"column":39,"offset":18285}}}],"position":{"start":{"line":1067,"column":1,"offset":18247},"end":{"line":1067,"column":39,"offset":18285}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将 Canvas 画布坐标转换为视口坐标。","position":{"start":{"line":1068,"column":1,"offset":18286},"end":{"line":1068,"column":22,"offset":18307}}}],"position":{"start":{"line":1068,"column":1,"offset":18286},"end":{"line":1068,"column":22,"offset":18307}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1070,"column":3,"offset":18311},"end":{"line":1070,"column":5,"offset":18313}}}],"position":{"start":{"line":1070,"column":1,"offset":18309},"end":{"line":1070,"column":7,"offset":18315}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| canvasX | Number | true | 画布x坐标 |\n| canvasY | Number | true | 画布y坐标 |","position":{"start":{"line":1070,"column":7,"offset":18315},"end":{"line":1074,"column":36,"offset":18437}}}],"position":{"start":{"line":1070,"column":1,"offset":18309},"end":{"line":1074,"column":36,"offset":18437}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":1077,"column":3,"offset":18442},"end":{"line":1077,"column":6,"offset":18445}}}],"position":{"start":{"line":1077,"column":1,"offset":18440},"end":{"line":1077,"column":8,"offset":18447}}}],"position":{"start":{"line":1077,"column":1,"offset":18440},"end":{"line":1077,"column":8,"offset":18447}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":1079,"column":3,"offset":18451},"end":{"line":1079,"column":16,"offset":18464}}}],"position":{"start":{"line":1079,"column":1,"offset":18449},"end":{"line":1079,"column":16,"offset":18464}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"包含的属性：x 和 y 属性，分别表示视口的 x、y 坐标。","position":{"start":{"line":1080,"column":3,"offset":18467},"end":{"line":1080,"column":33,"offset":18497}}}],"position":{"start":{"line":1080,"column":1,"offset":18465},"end":{"line":1080,"column":33,"offset":18497}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1079,"column":1,"offset":18449},"end":{"line":1080,"column":33,"offset":18497}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1082,"column":3,"offset":18501},"end":{"line":1082,"column":5,"offset":18503}}}],"position":{"start":{"line":1082,"column":1,"offset":18499},"end":{"line":1082,"column":7,"offset":18505}}}],"position":{"start":{"line":1082,"column":1,"offset":18499},"end":{"line":1082,"column":7,"offset":18505}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getPointByCanvas</span><span class=\"token punctuation\">(</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">200</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'视口x/y坐标分别为:'</span><span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1083,"column":1,"offset":18506},"end":{"line":1086,"column":4,"offset":18616}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getcanvasbypointx-y"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getcanvasbypointx-y","aria-label":"getcanvasbypointx y permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"getCanvasByPoint(x, y)","position":{"start":{"line":1088,"column":5,"offset":18622},"end":{"line":1088,"column":27,"offset":18644}}}],"position":{"start":{"line":1088,"column":1,"offset":18618},"end":{"line":1088,"column":27,"offset":18644}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将视口坐标转换为 Canvas 画布坐标。","position":{"start":{"line":1089,"column":1,"offset":18645},"end":{"line":1089,"column":22,"offset":18666}}}],"position":{"start":{"line":1089,"column":1,"offset":18645},"end":{"line":1089,"column":22,"offset":18666}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1091,"column":3,"offset":18670},"end":{"line":1091,"column":5,"offset":18672}}}],"position":{"start":{"line":1091,"column":1,"offset":18668},"end":{"line":1091,"column":7,"offset":18674}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| x | Number | true | 视口 x 坐标 |\n| y | Number | true | 视口 y 坐标 |","position":{"start":{"line":1091,"column":7,"offset":18674},"end":{"line":1095,"column":32,"offset":18788}}}],"position":{"start":{"line":1091,"column":1,"offset":18668},"end":{"line":1095,"column":32,"offset":18788}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":1098,"column":3,"offset":18793},"end":{"line":1098,"column":6,"offset":18796}}}],"position":{"start":{"line":1098,"column":1,"offset":18791},"end":{"line":1098,"column":8,"offset":18798}}}],"position":{"start":{"line":1098,"column":1,"offset":18791},"end":{"line":1098,"column":8,"offset":18798}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":1100,"column":3,"offset":18802},"end":{"line":1100,"column":16,"offset":18815}}}],"position":{"start":{"line":1100,"column":1,"offset":18800},"end":{"line":1100,"column":16,"offset":18815}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"包含的属性：x 和 y 属性，分别表示 Canvas 画布的 x、y 坐标。","position":{"start":{"line":1101,"column":3,"offset":18818},"end":{"line":1101,"column":41,"offset":18856}}}],"position":{"start":{"line":1101,"column":1,"offset":18816},"end":{"line":1101,"column":41,"offset":18856}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1100,"column":1,"offset":18800},"end":{"line":1101,"column":41,"offset":18856}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1103,"column":3,"offset":18860},"end":{"line":1103,"column":5,"offset":18862}}}],"position":{"start":{"line":1103,"column":1,"offset":18858},"end":{"line":1103,"column":7,"offset":18864}}}],"position":{"start":{"line":1103,"column":1,"offset":18858},"end":{"line":1103,"column":7,"offset":18864}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> point <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">getCanvasByPoint</span><span class=\"token punctuation\">(</span><span class=\"token number\">100</span><span class=\"token punctuation\">,</span> <span class=\"token number\">200</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Canvas画布的x/y坐标分别为:'</span><span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>x<span class=\"token punctuation\">,</span> point<span class=\"token punctuation\">.</span>y<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1104,"column":1,"offset":18865},"end":{"line":1107,"column":4,"offset":18982}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"动画"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%8A%A8%E7%94%BB","aria-label":"动画 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"动画","position":{"start":{"line":1109,"column":4,"offset":18987},"end":{"line":1109,"column":6,"offset":18989}}}],"position":{"start":{"line":1109,"column":1,"offset":18984},"end":{"line":1109,"column":6,"offset":18989}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"positionsanimate"},"children":[{"type":"element","tagName":"a","properties":{"href":"#positionsanimate","aria-label":"positionsanimate permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"positionsAnimate()","position":{"start":{"line":1110,"column":5,"offset":18994},"end":{"line":1110,"column":23,"offset":19012}}}],"position":{"start":{"line":1110,"column":1,"offset":18990},"end":{"line":1110,"column":23,"offset":19012}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据 Graph 上的 animateCfg 配置项，处理视口中节点的动画。","position":{"start":{"line":1111,"column":1,"offset":19013},"end":{"line":1111,"column":39,"offset":19051}}}],"position":{"start":{"line":1111,"column":1,"offset":19013},"end":{"line":1111,"column":39,"offset":19051}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"stopanimate"},"children":[{"type":"element","tagName":"a","properties":{"href":"#stopanimate","aria-label":"stopanimate permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"stopAnimate()","position":{"start":{"line":1113,"column":5,"offset":19057},"end":{"line":1113,"column":18,"offset":19070}}}],"position":{"start":{"line":1113,"column":1,"offset":19053},"end":{"line":1113,"column":18,"offset":19070}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"停止画布上的所有动画。","position":{"start":{"line":1114,"column":1,"offset":19071},"end":{"line":1114,"column":12,"offset":19082}}}],"position":{"start":{"line":1114,"column":1,"offset":19071},"end":{"line":1114,"column":12,"offset":19082}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1116,"column":3,"offset":19086},"end":{"line":1116,"column":5,"offset":19088}}}],"position":{"start":{"line":1116,"column":1,"offset":19084},"end":{"line":1116,"column":7,"offset":19090}}}],"position":{"start":{"line":1116,"column":1,"offset":19084},"end":{"line":1116,"column":7,"offset":19090}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">stopAnimate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1117,"column":1,"offset":19091},"end":{"line":1119,"column":4,"offset":19128}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"isanimating"},"children":[{"type":"element","tagName":"a","properties":{"href":"#isanimating","aria-label":"isanimating permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"isAnimating()","position":{"start":{"line":1121,"column":5,"offset":19134},"end":{"line":1121,"column":18,"offset":19147}}}],"position":{"start":{"line":1121,"column":1,"offset":19130},"end":{"line":1121,"column":18,"offset":19147}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"判断当前是否有正在执行的动画。","position":{"start":{"line":1122,"column":1,"offset":19148},"end":{"line":1122,"column":16,"offset":19163}}}],"position":{"start":{"line":1122,"column":1,"offset":19148},"end":{"line":1122,"column":16,"offset":19163}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"其他"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%85%B6%E4%BB%96","aria-label":"其他 permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"其他","position":{"start":{"line":1124,"column":4,"offset":19168},"end":{"line":1124,"column":6,"offset":19170}}}],"position":{"start":{"line":1124,"column":1,"offset":19165},"end":{"line":1124,"column":6,"offset":19170}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"addpluginplugin"},"children":[{"type":"element","tagName":"a","properties":{"href":"#addpluginplugin","aria-label":"addpluginplugin permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"addPlugin(plugin)","position":{"start":{"line":1125,"column":5,"offset":19175},"end":{"line":1125,"column":22,"offset":19192}}}],"position":{"start":{"line":1125,"column":1,"offset":19171},"end":{"line":1125,"column":22,"offset":19192}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"添加指定的插件。","position":{"start":{"line":1126,"column":1,"offset":19193},"end":{"line":1126,"column":9,"offset":19201}}}],"position":{"start":{"line":1126,"column":1,"offset":19193},"end":{"line":1126,"column":9,"offset":19201}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1128,"column":3,"offset":19205},"end":{"line":1128,"column":5,"offset":19207}}}],"position":{"start":{"line":1128,"column":1,"offset":19203},"end":{"line":1128,"column":7,"offset":19209}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| plugin | Object | true | 插件实例 |","position":{"start":{"line":1128,"column":7,"offset":19209},"end":{"line":1131,"column":34,"offset":19293}}}],"position":{"start":{"line":1128,"column":1,"offset":19203},"end":{"line":1131,"column":34,"offset":19293}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1134,"column":3,"offset":19298},"end":{"line":1134,"column":5,"offset":19300}}}],"position":{"start":{"line":1134,"column":1,"offset":19296},"end":{"line":1134,"column":7,"offset":19302}}}],"position":{"start":{"line":1134,"column":1,"offset":19296},"end":{"line":1134,"column":7,"offset":19302}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> miniMap <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/g6/build/minimap'</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">Plugin</span><span class=\"token punctuation\">(</span>miniMap<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1135,"column":1,"offset":19303},"end":{"line":1138,"column":4,"offset":19387}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"removepluginplugin"},"children":[{"type":"element","tagName":"a","properties":{"href":"#removepluginplugin","aria-label":"removepluginplugin permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"removePlugin(plugin)","position":{"start":{"line":1140,"column":5,"offset":19393},"end":{"line":1140,"column":25,"offset":19413}}}],"position":{"start":{"line":1140,"column":1,"offset":19389},"end":{"line":1140,"column":25,"offset":19413}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"移除指定的插件。","position":{"start":{"line":1141,"column":1,"offset":19414},"end":{"line":1141,"column":9,"offset":19422}}}],"position":{"start":{"line":1141,"column":1,"offset":19414},"end":{"line":1141,"column":9,"offset":19422}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1143,"column":3,"offset":19426},"end":{"line":1143,"column":5,"offset":19428}}}],"position":{"start":{"line":1143,"column":1,"offset":19424},"end":{"line":1143,"column":7,"offset":19430}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| plugin | Object | true | 插件实例 |","position":{"start":{"line":1143,"column":7,"offset":19430},"end":{"line":1146,"column":34,"offset":19514}}}],"position":{"start":{"line":1143,"column":1,"offset":19424},"end":{"line":1146,"column":34,"offset":19514}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1149,"column":3,"offset":19519},"end":{"line":1149,"column":5,"offset":19521}}}],"position":{"start":{"line":1149,"column":1,"offset":19517},"end":{"line":1149,"column":7,"offset":19523}}}],"position":{"start":{"line":1149,"column":1,"offset":19517},"end":{"line":1149,"column":7,"offset":19523}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">import</span> miniMap <span class=\"token keyword\">from</span> <span class=\"token string\">'@antv/g6/build/minimap'</span><span class=\"token punctuation\">;</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">removePlugin</span><span class=\"token punctuation\">(</span>miniMap<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1150,"column":1,"offset":19524},"end":{"line":1153,"column":4,"offset":19614}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"getkey"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getkey","aria-label":"getkey permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"get(key)","position":{"start":{"line":1155,"column":5,"offset":19620},"end":{"line":1155,"column":13,"offset":19628}}}],"position":{"start":{"line":1155,"column":1,"offset":19616},"end":{"line":1155,"column":13,"offset":19628}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"根据key获取属性值。","position":{"start":{"line":1156,"column":1,"offset":19629},"end":{"line":1156,"column":12,"offset":19640}}}],"position":{"start":{"line":1156,"column":1,"offset":19629},"end":{"line":1156,"column":12,"offset":19640}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1158,"column":3,"offset":19644},"end":{"line":1158,"column":5,"offset":19646}}}],"position":{"start":{"line":1158,"column":1,"offset":19642},"end":{"line":1158,"column":7,"offset":19648}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| key | String | true | 属性的键 |","position":{"start":{"line":1158,"column":7,"offset":19648},"end":{"line":1161,"column":31,"offset":19729}}}],"position":{"start":{"line":1158,"column":1,"offset":19642},"end":{"line":1161,"column":31,"offset":19729}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1164,"column":3,"offset":19734},"end":{"line":1164,"column":5,"offset":19736}}}],"position":{"start":{"line":1164,"column":1,"offset":19732},"end":{"line":1164,"column":7,"offset":19738}}}],"position":{"start":{"line":1164,"column":1,"offset":19732},"end":{"line":1164,"column":7,"offset":19738}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 获取group</span>\n<span class=\"token keyword\">const</span> group <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'group'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 获取canvas实例</span>\n<span class=\"token keyword\">const</span> canvas <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'canvas'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 获取autoPaint值</span>\n<span class=\"token keyword\">const</span> autoPaint <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">'autoPaint'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1165,"column":1,"offset":19739},"end":{"line":1174,"column":4,"offset":19908}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"setkey-val"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setkey-val","aria-label":"setkey val permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"set(key, val)","position":{"start":{"line":1176,"column":5,"offset":19914},"end":{"line":1176,"column":18,"offset":19927}}}],"position":{"start":{"line":1176,"column":1,"offset":19910},"end":{"line":1176,"column":18,"offset":19927}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"设置属性值。","position":{"start":{"line":1177,"column":1,"offset":19928},"end":{"line":1177,"column":7,"offset":19934}}}],"position":{"start":{"line":1177,"column":1,"offset":19928},"end":{"line":1177,"column":7,"offset":19934}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1179,"column":3,"offset":19938},"end":{"line":1179,"column":5,"offset":19940}}}],"position":{"start":{"line":1179,"column":1,"offset":19936},"end":{"line":1179,"column":7,"offset":19942}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| key | String | true | 属性的键 |\n| val | String | Object | Array | true | 属性的值 |","position":{"start":{"line":1179,"column":7,"offset":19942},"end":{"line":1183,"column":48,"offset":20071}}}],"position":{"start":{"line":1179,"column":1,"offset":19936},"end":{"line":1183,"column":48,"offset":20071}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1186,"column":3,"offset":20076},"end":{"line":1186,"column":5,"offset":20078}}}],"position":{"start":{"line":1186,"column":1,"offset":20074},"end":{"line":1186,"column":7,"offset":20080}}}],"position":{"start":{"line":1186,"column":1,"offset":20074},"end":{"line":1186,"column":7,"offset":20080}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token comment\">// 设置capture值为false</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">set</span><span class=\"token punctuation\">(</span><span class=\"token string\">'capture'</span><span class=\"token punctuation\">,</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 设置customGroup值为group</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">set</span><span class=\"token punctuation\">(</span><span class=\"token string\">'customGroup'</span><span class=\"token punctuation\">,</span> group<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// 设置nodeIdList值为数组</span>\ngraph<span class=\"token punctuation\">.</span><span class=\"token function\">set</span><span class=\"token punctuation\">(</span><span class=\"token string\">'nodeIdList'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token number\">5</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1187,"column":1,"offset":20081},"end":{"line":1196,"column":4,"offset":20259}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"downloadimagename"},"children":[{"type":"element","tagName":"a","properties":{"href":"#downloadimagename","aria-label":"downloadimagename permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"downloadImage(name)","position":{"start":{"line":1198,"column":5,"offset":20265},"end":{"line":1198,"column":24,"offset":20284}}}],"position":{"start":{"line":1198,"column":1,"offset":20261},"end":{"line":1198,"column":24,"offset":20284}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将画布上的元素导出为图片。","position":{"start":{"line":1199,"column":1,"offset":20285},"end":{"line":1199,"column":14,"offset":20298}}}],"position":{"start":{"line":1199,"column":1,"offset":20285},"end":{"line":1199,"column":14,"offset":20298}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"参数","position":{"start":{"line":1201,"column":3,"offset":20302},"end":{"line":1201,"column":5,"offset":20304}}}],"position":{"start":{"line":1201,"column":1,"offset":20300},"end":{"line":1201,"column":7,"offset":20306}}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| name | String | true | 图片的名称 |","position":{"start":{"line":1201,"column":7,"offset":20306},"end":{"line":1204,"column":33,"offset":20389}}}],"position":{"start":{"line":1201,"column":1,"offset":20300},"end":{"line":1204,"column":33,"offset":20389}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1206,"column":3,"offset":20393},"end":{"line":1206,"column":5,"offset":20395}}}],"position":{"start":{"line":1206,"column":1,"offset":20391},"end":{"line":1206,"column":7,"offset":20397}}}],"position":{"start":{"line":1206,"column":1,"offset":20391},"end":{"line":1206,"column":7,"offset":20397}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">graph<span class=\"token punctuation\">.</span><span class=\"token function\">downloadImage</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1207,"column":1,"offset":20398},"end":{"line":1209,"column":4,"offset":20437}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"todataurl"},"children":[{"type":"element","tagName":"a","properties":{"href":"#todataurl","aria-label":"todataurl permalink","class":"anchor"},"children":[{"type":"raw","value":"<svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>"}]},{"type":"text","value":"toDataURL()","position":{"start":{"line":1211,"column":5,"offset":20443},"end":{"line":1211,"column":16,"offset":20454}}}],"position":{"start":{"line":1211,"column":1,"offset":20439},"end":{"line":1211,"column":16,"offset":20454}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"将画布上元素生成为图片的 URL。","position":{"start":{"line":1212,"column":1,"offset":20455},"end":{"line":1212,"column":18,"offset":20472}}}],"position":{"start":{"line":1212,"column":1,"offset":20455},"end":{"line":1212,"column":18,"offset":20472}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"返回值","position":{"start":{"line":1214,"column":3,"offset":20476},"end":{"line":1214,"column":6,"offset":20479}}}],"position":{"start":{"line":1214,"column":1,"offset":20474},"end":{"line":1214,"column":8,"offset":20481}}}],"position":{"start":{"line":1214,"column":1,"offset":20474},"end":{"line":1214,"column":8,"offset":20481}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值类型：String；","position":{"start":{"line":1216,"column":3,"offset":20485},"end":{"line":1216,"column":16,"offset":20498}}}],"position":{"start":{"line":1216,"column":1,"offset":20483},"end":{"line":1216,"column":16,"offset":20498}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"返回值表示生成的图片的 URL。","position":{"start":{"line":1217,"column":3,"offset":20501},"end":{"line":1217,"column":19,"offset":20517}}}],"position":{"start":{"line":1217,"column":1,"offset":20499},"end":{"line":1217,"column":19,"offset":20517}}},{"type":"text","value":"\n"}],"position":{"start":{"line":1216,"column":1,"offset":20483},"end":{"line":1217,"column":19,"offset":20517}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"用法","position":{"start":{"line":1219,"column":3,"offset":20521},"end":{"line":1219,"column":5,"offset":20523}}}],"position":{"start":{"line":1219,"column":1,"offset":20519},"end":{"line":1219,"column":7,"offset":20525}}}],"position":{"start":{"line":1219,"column":1,"offset":20519},"end":{"line":1219,"column":7,"offset":20525}}},{"type":"text","value":"\n"},{"type":"raw","value":"<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> dataURL <span class=\"token operator\">=</span> graph<span class=\"token punctuation\">.</span><span class=\"token function\">toDataURL</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre></div>","position":{"start":{"line":1220,"column":1,"offset":20526},"end":{"line":1222,"column":4,"offset":20577}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":1224,"column":1,"offset":20579}}}}