{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-ast-7165bb01d288530982a39852a469d1bb-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":{"type":"root","children":[{"type":"paragraph","children":[{"type":"text","value":"Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行。","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":55,"offset":55},"indent":[]}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":55,"offset":55},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Graph 的生命周期为：初始化—>加载数据—>渲染—>更新—>销毁。","position":{"start":{"line":4,"column":1,"offset":57},"end":{"line":4,"column":36,"offset":92},"indent":[]}}],"position":{"start":{"line":4,"column":1,"offset":57},"end":{"line":4,"column":36,"offset":92},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"link","url":"#初始化","title":null,"children":[],"data":{"hProperties":{"aria-label":"初始化 permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"初始化","position":{"start":{"line":6,"column":4,"offset":97},"end":{"line":6,"column":7,"offset":100},"indent":[]}}],"position":{"start":{"line":6,"column":1,"offset":94},"end":{"line":6,"column":7,"offset":100},"indent":[]},"data":{"id":"初始化","htmlAttributes":{"id":"初始化"},"hProperties":{"id":"初始化"}}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#g6graph","title":null,"children":[],"data":{"hProperties":{"aria-label":"g6graph permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"G6.Graph","position":{"start":{"line":7,"column":5,"offset":105},"end":{"line":7,"column":13,"offset":113},"indent":[]}}],"position":{"start":{"line":7,"column":1,"offset":101},"end":{"line":7,"column":13,"offset":113},"indent":[]},"data":{"id":"g6graph","htmlAttributes":{"id":"g6graph"},"hProperties":{"id":"g6graph"}}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":8,"column":3,"offset":116},"end":{"line":8,"column":5,"offset":118},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":114},"end":{"line":8,"column":7,"offset":120},"indent":[]}},{"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},"indent":[1,1,1,1,1,1,1,1]}},{"type":"html","value":"
","position":{"start":{"line":16,"column":72,"offset":534},"end":{"line":16,"column":78,"offset":540},"indent":[]}},{"type":"text","value":"- 可以是一个值, 例如：fitViewPadding: 20","position":{"start":{"line":16,"column":78,"offset":540},"end":{"line":16,"column":109,"offset":571},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":16,"column":109,"offset":571},"end":{"line":16,"column":115,"offset":577},"indent":[]}},{"type":"text","value":"- 也可以是一个数组，例如：fitViewPadding: ","position":{"start":{"line":16,"column":115,"offset":577},"end":{"line":16,"column":145,"offset":607},"indent":[]}},{"type":"linkReference","identifier":" 20, 40, 50, 20 ","label":" 20, 40, 50, 20 ","referenceType":"shortcut","children":[{"type":"text","value":" 20, 40, 50, 20 ","position":{"start":{"line":16,"column":146,"offset":608},"end":{"line":16,"column":162,"offset":624},"indent":[]}}],"position":{"start":{"line":16,"column":145,"offset":607},"end":{"line":16,"column":163,"offset":625},"indent":[]}},{"type":"html","value":"
","position":{"start":{"line":16,"column":163,"offset":625},"end":{"line":16,"column":169,"offset":631},"indent":[]}},{"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},"indent":[1,1,1]}},{"type":"link","title":null,"url":"","children":[{"type":"text","value":"G6 中的 Mode","position":{"start":{"line":19,"column":37,"offset":949},"end":{"line":19,"column":47,"offset":959},"indent":[]}}],"position":{"start":{"line":19,"column":36,"offset":948},"end":{"line":19,"column":50,"offset":962},"indent":[]}},{"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},"indent":[1,1,1,1,1]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/plugin","children":[{"type":"text","value":"plugin","position":{"start":{"line":24,"column":47,"offset":1319},"end":{"line":24,"column":53,"offset":1325},"indent":[]}}],"position":{"start":{"line":24,"column":46,"offset":1318},"end":{"line":24,"column":92,"offset":1364},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"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},"indent":[1,1,1]}},{"type":"html","value":"
","position":{"start":{"line":27,"column":14,"offset":1480},"end":{"line":27,"column":20,"offset":1486},"indent":[]}},{"type":"text","value":"onFrame | Function | null | 回调函数，用于自定义节点运动路径，为空时线性运动。 |\n| animateCfg.","position":{"start":{"line":27,"column":20,"offset":1486},"end":{"line":28,"column":14,"offset":1556},"indent":[1]}},{"type":"html","value":"
","position":{"start":{"line":28,"column":14,"offset":1556},"end":{"line":28,"column":20,"offset":1562},"indent":[]}},{"type":"text","value":"duration | Number | 500 | 动画时长，单位为毫秒。 |\n| animateCfg.","position":{"start":{"line":28,"column":20,"offset":1562},"end":{"line":29,"column":14,"offset":1615},"indent":[1]}},{"type":"html","value":"
","position":{"start":{"line":29,"column":14,"offset":1615},"end":{"line":29,"column":20,"offset":1621},"indent":[]}},{"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},"indent":[1,1,1,1,1]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/taixri#f283J","children":[{"type":"text","value":"文档","position":{"start":{"line":34,"column":54,"offset":1890},"end":{"line":34,"column":56,"offset":1892},"indent":[]}}],"position":{"start":{"line":34,"column":53,"offset":1889},"end":{"line":34,"column":101,"offset":1937},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"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},"indent":[1]}},{"type":"link","title":null,"url":"https://www.yuque.com/antv/g6/agbmu2","children":[{"type":"text","value":"Layout API文档","position":{"start":{"line":35,"column":130,"offset":2069},"end":{"line":35,"column":142,"offset":2081},"indent":[]}}],"position":{"start":{"line":35,"column":129,"offset":2068},"end":{"line":35,"column":181,"offset":2120},"indent":[]},"data":{"hProperties":{"target":"_self","rel":"nofollow"}}},{"type":"text","value":" |","position":{"start":{"line":35,"column":181,"offset":2120},"end":{"line":35,"column":183,"offset":2122},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":114},"end":{"line":35,"column":183,"offset":2122},"indent":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"重点说明","position":{"start":{"line":38,"column":3,"offset":2127},"end":{"line":38,"column":7,"offset":2131},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":2125},"end":{"line":38,"column":9,"offset":2133},"indent":[]}},{"type":"text","value":": G6 3.1 版本中实例化 Graph 时，新增了 ","position":{"start":{"line":38,"column":9,"offset":2133},"end":{"line":38,"column":37,"offset":2161},"indent":[]}},{"type":"html","value":"nodeStateStyles","position":{"start":{"line":38,"column":37,"offset":2161},"end":{"line":38,"column":54,"offset":2178},"indent":[]}},{"type":"text","value":"及 ","position":{"start":{"line":38,"column":54,"offset":2178},"end":{"line":38,"column":56,"offset":2180},"indent":[]}},{"type":"html","value":"edgeStateStyles","position":{"start":{"line":38,"column":56,"offset":2180},"end":{"line":38,"column":73,"offset":2197},"indent":[]}},{"type":"text","value":"两个配置项，删除了 ","position":{"start":{"line":38,"column":73,"offset":2197},"end":{"line":38,"column":83,"offset":2207},"indent":[]}},{"type":"html","value":"nodeStyle","position":{"start":{"line":38,"column":83,"offset":2207},"end":{"line":38,"column":94,"offset":2218},"indent":[]}},{"type":"text","value":" 和 ","position":{"start":{"line":38,"column":94,"offset":2218},"end":{"line":38,"column":97,"offset":2221},"indent":[]}},{"type":"html","value":"edgeStyle","position":{"start":{"line":38,"column":97,"offset":2221},"end":{"line":38,"column":108,"offset":2232},"indent":[]}},{"type":"text","value":" ，使用 3.1 以下版本的同学，只需要将 ","position":{"start":{"line":38,"column":108,"offset":2232},"end":{"line":38,"column":130,"offset":2254},"indent":[]}},{"type":"html","value":"nodeStyle","position":{"start":{"line":38,"column":130,"offset":2254},"end":{"line":38,"column":141,"offset":2265},"indent":[]}},{"type":"text","value":" 改成 ","position":{"start":{"line":38,"column":141,"offset":2265},"end":{"line":38,"column":145,"offset":2269},"indent":[]}},{"type":"html","value":"nodeStateStyles","position":{"start":{"line":38,"column":145,"offset":2269},"end":{"line":38,"column":162,"offset":2286},"indent":[]}},{"type":"text","value":" ，将 edgeStyle 改成 ","position":{"start":{"line":38,"column":162,"offset":2286},"end":{"line":38,"column":179,"offset":2303},"indent":[]}},{"type":"html","value":"edgeStateStyles","position":{"start":{"line":38,"column":179,"offset":2303},"end":{"line":38,"column":196,"offset":2320},"indent":[]}},{"type":"text","value":" ，配置内容保持不变。","position":{"start":{"line":38,"column":196,"offset":2320},"end":{"line":38,"column":207,"offset":2331},"indent":[]}}],"position":{"start":{"line":38,"column":1,"offset":2125},"end":{"line":38,"column":207,"offset":2331},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":40,"column":3,"offset":2335},"end":{"line":40,"column":5,"offset":2337},"indent":[]}}],"position":{"start":{"line":40,"column":1,"offset":2333},"end":{"line":40,"column":7,"offset":2339},"indent":[]}},{"type":"text","value":"\nGraph 的初始化通过 new 进行实例化，实例化时需要传入需要的参数。","position":{"start":{"line":40,"column":7,"offset":2339},"end":{"line":41,"column":38,"offset":2377},"indent":[1]}}],"position":{"start":{"line":40,"column":1,"offset":2333},"end":{"line":41,"column":38,"offset":2377},"indent":[1]}},{"type":"html","lang":"javascript","meta":null,"value":"const graph = new G6.Graph({\n container: '',\n width: 500,\n height: 500,\n modes: {\n default: ['drag-canvas'],\n },\n layout: {\n type: 'radial',\n unitRadius: 50,\n center: [500, 300],\n },\n});\n
const data = {\n nodes: [\n {\n id: 'node1',\n label: 'node1',\n },\n {\n id: 'node2',\n label: 'node2',\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n },\n ],\n};\n\n// graph是Graph的实例\ngraph.data(data);\n
const data = {\n nodes: [\n {\n id: 'node1',\n groupId: 'group1',\n label: 'node1',\n },\n {\n id: 'node2',\n groupId: 'group1',\n label: 'node2',\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n },\n ],\n groups: [\n {\n id: 'group1',\n title: {\n text: '我的群组1',\n stroke: '#444',\n offsetX: -20,\n offsetY: 30,\n },\n },\n ],\n};\n\n// graph是Graph的实例\ngraph.renderCustomGroup(data, 'circle');\n
const data = {\n nodes: [\n {\n id: 'node1',\n label: 'node1',\n },\n {\n id: 'node2',\n label: 'node2',\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n },\n ],\n};\n\n// graph是Graph的实例\ngraph.read(data);\n
const data = {\n nodes: [\n {\n id: 'node1',\n label: 'node1',\n },\n {\n id: 'node2',\n label: 'node2',\n },\n ],\n edges: [\n {\n source: 'node1',\n target: 'node2',\n },\n ],\n};\n\n// graph是Graph的实例\ngraph.changeData(data);\n
graph.collapseGroup('groupId');\n
graph.expandGroup('groupId');\n
const model = {\n id: 'node',\n label: 'node',\n address: 'cq',\n x: 200,\n y: 150,\n style: {\n fill: 'blue',\n },\n};\n\ngraph.addItem('node', model);\n\n// 当type为group时候，model的数据结构如下：\nconst model = {\n groupId: 'xxx000999',\n nodes: ['123', '23'],\n type: 'rect',\n zIndex: 0,\n title: {\n text: '名称',\n },\n};\n\ngraph.addItem('group', model);\n
const model = {\n id: 'node',\n label: 'node',\n address: 'cq',\n x: 200,\n y: 150,\n style: {\n fill: 'blue',\n },\n};\n\n// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.updateItem(item, model);\n
// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.removeItem(item);\n
// 通过ID查询节点实例\nconst item = graph.findById('node');\ngraph.refreshItem(item);\n
graph.refreshPositions();\n
paint()","position":{"start":{"line":373,"column":27,"offset":7011},"end":{"line":373,"column":36,"offset":7020},"indent":[]}},{"type":"text","value":" 方法，让修改生效。","position":{"start":{"line":373,"column":36,"offset":7020},"end":{"line":373,"column":46,"offset":7030},"indent":[]}}],"position":{"start":{"line":373,"column":1,"offset":6985},"end":{"line":373,"column":46,"offset":7030},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"该方法无参数。","position":{"start":{"line":375,"column":1,"offset":7032},"end":{"line":375,"column":8,"offset":7039},"indent":[]}}],"position":{"start":{"line":375,"column":1,"offset":7032},"end":{"line":375,"column":8,"offset":7039},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":377,"column":3,"offset":7043},"end":{"line":377,"column":5,"offset":7045},"indent":[]}}],"position":{"start":{"line":377,"column":1,"offset":7041},"end":{"line":377,"column":7,"offset":7047},"indent":[]}}],"position":{"start":{"line":377,"column":1,"offset":7041},"end":{"line":377,"column":7,"offset":7047},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const item = e.item;\nconst graph = this.graph;\n\nconst autoPaint = graph.get('autoPaint');\ngraph.setAutoPaint(false);\n\ngraph.setItemState(item, 'selected', true);\n\ngraph.paint();\ngraph.setAutoPaint(autoPaint);\n
paint()","position":{"start":{"line":392,"column":22,"offset":7319},"end":{"line":392,"column":31,"offset":7328},"indent":[]}},{"type":"text","value":" 方法使用。","position":{"start":{"line":392,"column":31,"offset":7328},"end":{"line":392,"column":37,"offset":7334},"indent":[]}}],"position":{"start":{"line":392,"column":1,"offset":7298},"end":{"line":392,"column":37,"offset":7334},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":394,"column":3,"offset":7338},"end":{"line":394,"column":5,"offset":7340},"indent":[]}}],"position":{"start":{"line":394,"column":1,"offset":7336},"end":{"line":394,"column":7,"offset":7342},"indent":[]}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| auto | Boolean | true | 是否自动重绘 |","position":{"start":{"line":394,"column":7,"offset":7342},"end":{"line":397,"column":35,"offset":7427},"indent":[1,1,1]}}],"position":{"start":{"line":394,"column":1,"offset":7336},"end":{"line":397,"column":35,"offset":7427},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":400,"column":3,"offset":7432},"end":{"line":400,"column":5,"offset":7434},"indent":[]}}],"position":{"start":{"line":400,"column":1,"offset":7430},"end":{"line":400,"column":7,"offset":7436},"indent":[]}}],"position":{"start":{"line":400,"column":1,"offset":7430},"end":{"line":400,"column":7,"offset":7436},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const item = e.item;\nconst graph = this.graph;\n\nconst autoPaint = graph.get('autoPaint');\ngraph.setAutoPaint(false);\n\ngraph.setItemState(item, 'selected', true);\n\ngraph.paint();\ngraph.setAutoPaint(autoPaint);\n
const graph = new G6.Graph({\n container: 'mountNode',\n width: 1000,\n height: 600,\n layout: {\n type: 'force',\n },\n modes: {\n default: ['drag-node'],\n },\n});\n\ngraph.data({\n nodes: data.nodes,\n edges: data.edges.map((edge, i) => {\n edge.id = 'edge' + i;\n return Object.assign({}, edge);\n }),\n});\n\ngraph.render();\n\nfunction refreshDragedNodePosition(e) {\n const model = e.item.get('model');\n model.fx = e.x;\n model.fy = e.y;\n}\n\ngraph.on('node:dragstart', e => {\n // 拖动节点时重新布局\n graph.layout();\n refreshDragedNodePosition(e);\n});\n\ngraph.on('node:drag', e => {\n refreshDragedNodePosition(e);\n});\n\ngraph.on('node:dragend', e => {\n e.item.get('model').fx = null;\n e.item.get('model').fy = null;\n});\n
cfg","position":{"start":{"line":470,"column":9,"offset":8578},"end":{"line":470,"column":14,"offset":8583},"indent":[]}},{"type":"text","value":" 中含有 ","position":{"start":{"line":470,"column":14,"offset":8583},"end":{"line":470,"column":19,"offset":8588},"indent":[]}},{"type":"html","value":"type","position":{"start":{"line":470,"column":19,"offset":8588},"end":{"line":470,"column":25,"offset":8594},"indent":[]}},{"type":"text","value":" 字段，","position":{"start":{"line":470,"column":25,"offset":8594},"end":{"line":470,"column":29,"offset":8598},"indent":[]}},{"type":"html","value":"type","position":{"start":{"line":470,"column":29,"offset":8598},"end":{"line":470,"column":35,"offset":8604},"indent":[]}},{"type":"text","value":" 字段类型为 String，且与现有布局方法不同，则更换布局；","position":{"start":{"line":470,"column":35,"offset":8604},"end":{"line":470,"column":66,"offset":8635},"indent":[]}}],"position":{"start":{"line":470,"column":4,"offset":8573},"end":{"line":470,"column":66,"offset":8635},"indent":[]}}],"position":{"start":{"line":470,"column":1,"offset":8570},"end":{"line":470,"column":66,"offset":8635},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"如果参数 ","position":{"start":{"line":471,"column":4,"offset":8639},"end":{"line":471,"column":9,"offset":8644},"indent":[]}},{"type":"html","value":"cfg","position":{"start":{"line":471,"column":9,"offset":8644},"end":{"line":471,"column":14,"offset":8649},"indent":[]}},{"type":"text","value":" 中不包含 ","position":{"start":{"line":471,"column":14,"offset":8649},"end":{"line":471,"column":20,"offset":8655},"indent":[]}},{"type":"html","value":"type","position":{"start":{"line":471,"column":20,"offset":8655},"end":{"line":471,"column":26,"offset":8661},"indent":[]}},{"type":"text","value":" 字段，则保持原有布局，仅更新布局配置项。","position":{"start":{"line":471,"column":26,"offset":8661},"end":{"line":471,"column":47,"offset":8682},"indent":[]}}],"position":{"start":{"line":471,"column":4,"offset":8639},"end":{"line":471,"column":47,"offset":8682},"indent":[]}}],"position":{"start":{"line":471,"column":1,"offset":8636},"end":{"line":471,"column":47,"offset":8682},"indent":[]}}],"position":{"start":{"line":470,"column":1,"offset":8570},"end":{"line":471,"column":47,"offset":8682},"indent":[1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":473,"column":3,"offset":8686},"end":{"line":473,"column":5,"offset":8688},"indent":[]}}],"position":{"start":{"line":473,"column":1,"offset":8684},"end":{"line":473,"column":7,"offset":8690},"indent":[]}},{"type":"text","value":"\n| 名称 | 类型 | 是否必选 | 描述 |\n| --- | --- | --- | --- |\n| cfg | Object | true | 新布局配置项 |","position":{"start":{"line":473,"column":7,"offset":8690},"end":{"line":476,"column":33,"offset":8773},"indent":[1,1,1]}}],"position":{"start":{"line":473,"column":1,"offset":8684},"end":{"line":476,"column":33,"offset":8773},"indent":[1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":479,"column":3,"offset":8778},"end":{"line":479,"column":5,"offset":8780},"indent":[]}}],"position":{"start":{"line":479,"column":1,"offset":8776},"end":{"line":479,"column":7,"offset":8782},"indent":[]}}],"position":{"start":{"line":479,"column":1,"offset":8776},"end":{"line":479,"column":7,"offset":8782},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const graph = new G6.Graph({\n container: 'mountNode',\n width: 1000,\n height: 600,\n modes: {\n default: ['drag-canvas', 'drag-node'],\n },\n layout: {\n type: 'circular',\n center: [500, 300],\n },\n animate: true,\n});\ngraph.data(data);\ngraph.render();\n\n// 实例化时通过layout指定布局，在合适的时候通过updateLayout更新布局配置\ngraph.updateLayout({\n radius: 200,\n startAngle: Math.PI / 4,\n endAngle: Math.PI,\n divisions: 5,\n ordering: 'degree',\n});\n
// 通过ID查询节点实例\nconst item = graph.findById('nodeId');\ngraph.showItem(item);\n\n// 等价于\ngraph.showItem('nodeId');\n
// 通过ID查询节点实例\nconst item = graph.findById('nodeId');\ngraph.hideItem(item);\n\n// 等价于\ngraph.hideItem('nodeId');\n
beforitemstatechange","position":{"start":{"line":570,"column":13,"offset":10028},"end":{"line":570,"column":35,"offset":10050},"indent":[]}},{"type":"text","value":"，","position":{"start":{"line":570,"column":35,"offset":10050},"end":{"line":570,"column":36,"offset":10051},"indent":[]}},{"type":"html","value":"afteritemstatechange","position":{"start":{"line":570,"column":36,"offset":10051},"end":{"line":570,"column":58,"offset":10073},"indent":[]}},{"type":"text","value":"事件。","position":{"start":{"line":570,"column":58,"offset":10073},"end":{"line":570,"column":61,"offset":10076},"indent":[]}}],"position":{"start":{"line":570,"column":1,"offset":10016},"end":{"line":570,"column":61,"offset":10076},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":572,"column":3,"offset":10080},"end":{"line":572,"column":5,"offset":10082},"indent":[]}}],"position":{"start":{"line":572,"column":1,"offset":10078},"end":{"line":572,"column":7,"offset":10084},"indent":[]}},{"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},"indent":[1,1,1,1,1]}}],"position":{"start":{"line":572,"column":1,"offset":10078},"end":{"line":577,"column":38,"offset":10285},"indent":[1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":579,"column":3,"offset":10289},"end":{"line":579,"column":5,"offset":10291},"indent":[]}}],"position":{"start":{"line":579,"column":1,"offset":10287},"end":{"line":579,"column":7,"offset":10293},"indent":[]}}],"position":{"start":{"line":579,"column":1,"offset":10287},"end":{"line":579,"column":7,"offset":10293},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"graph.setItemState('node1', 'selected', true);\n
// 清除单个状态\ngraph.clearItemStates(node, 'a');\n\n// 清除多个状态\ngraph.clearItemStates(node, ['a', 'b']);\n\n// 清除所有状态\ngraph.clearItemStates(node);\n
graph.node(node => {\n return {\n id: node.id,\n shape: 'rect',\n style: {\n fill: 'blue',\n },\n };\n});\n\ngraph.data(data);\ngraph.render();\n
graph.edge(edge => {\n return {\n id: edge.id,\n shape: 'cubic-horizontal',\n style: {\n stroke: 'green',\n },\n };\n});\n\ngraph.data(data);\ngraph.render();\n
// 将单个Behavior添加到单个模式（默认的default模式）中\ngraph.addBehaviors('click-select', 'default');\n\n// 将多个Behavior添加到单个模式（默认的default模式）中\ngraph.addBehaviors(['brush-select', 'click-select'], 'default');\n\n// 将单个Behavior添加到多个模式中\ngraph.addBehaviors('brush-select', ['default', 'select']);\n\n// 将多个Behavior添加到多个模式中\ngraph.addBehaviors(['brush-select', 'click-select'], ['default', 'select']);\n
// 从单个模式中移除单个Behavior\ngraph.removeBehaviors('click-select', 'default');\n\n// 从单个模式中移除多个Behavior\ngraph.removeBehaviors(['brush-select', 'click-select'], 'default');\n\n// 从多个模式中移除单个Behavior\ngraph.removeBehaviors('brush-select', ['default', 'select']);\n\n// 从多个模式中移除多个Behavior\ngraph.removeBehaviors(['brush-select', 'click-select'], ['default', 'select']);\n
const graph = new G6.Graph({\n container: div,\n width: 500,\n height: 500,\n pixelRatio: 2,\n modes: {\n default: [...],\n custom: [...]\n }\n})\n\ngraph.setMode('custom')
// 返回值mode表示当前的行为模式\nconst mode = graph.getCurrentMode();\n
// 返回值zoom表示当前视口的缩放比例\nconst zoom = graph.getZoom();\n
// 以(100, 100)为中心点，放大3倍\ngraph.zoom(3, { x: 100, y: 100 });\n\n// 以当前元素位置为中心，缩小到0.5\ngraph.zoom(0.5);\n
// 以(100, 100)为中心点，放大3倍\ngraph.zoomTo(3, { x: 100, y: 100 });\n\n// 以当前元素位置为中心，缩小到0.5\ngraph.zoomTo(0.5);\n
graph.changeSize(600, 350);\n
graph.translate(100, 100);\n
graph.moveTo(200, 300);\n
// padding只设置为一个值，则表示top = right = bottom = left = 20\ngraph.fitView(20);\n\n// 等价于graph.fitView(20)\ngraph.fitView([20]);\n\n// padding设置为数组，只传2个值，则top = bottom = 20, right = left = 10\ngraph.fitView([20, 10]);\n\n// padding设置为数组，四个方向值都指定\ngraph.fitView([20, 10, 20, 15]);\n
undefined","position":{"start":{"line":899,"column":35,"offset":15645},"end":{"line":899,"column":46,"offset":15656},"indent":[]}},{"type":"text","value":" 。","position":{"start":{"line":899,"column":46,"offset":15656},"end":{"line":899,"column":48,"offset":15658},"indent":[]}}],"position":{"start":{"line":899,"column":3,"offset":15613},"end":{"line":899,"column":48,"offset":15658},"indent":[]}}],"position":{"start":{"line":899,"column":1,"offset":15611},"end":{"line":899,"column":48,"offset":15658},"indent":[]}}],"position":{"start":{"line":898,"column":1,"offset":15595},"end":{"line":899,"column":48,"offset":15658},"indent":[1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":901,"column":3,"offset":15662},"end":{"line":901,"column":5,"offset":15664},"indent":[]}}],"position":{"start":{"line":901,"column":1,"offset":15660},"end":{"line":901,"column":7,"offset":15666},"indent":[]}}],"position":{"start":{"line":901,"column":1,"offset":15660},"end":{"line":901,"column":7,"offset":15666},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const findNode = graph.find('node', node => {\n return node.get('model').x === 100;\n});\n
undefined","position":{"start":{"line":920,"column":30,"offset":15953},"end":{"line":920,"column":41,"offset":15964},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":920,"column":41,"offset":15964},"end":{"line":920,"column":42,"offset":15965},"indent":[]}}],"position":{"start":{"line":920,"column":3,"offset":15926},"end":{"line":920,"column":42,"offset":15965},"indent":[]}}],"position":{"start":{"line":920,"column":1,"offset":15924},"end":{"line":920,"column":42,"offset":15965},"indent":[]}}],"position":{"start":{"line":919,"column":1,"offset":15908},"end":{"line":920,"column":42,"offset":15965},"indent":[1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":922,"column":3,"offset":15969},"end":{"line":922,"column":5,"offset":15971},"indent":[]}}],"position":{"start":{"line":922,"column":1,"offset":15967},"end":{"line":922,"column":7,"offset":15973},"indent":[]}}],"position":{"start":{"line":922,"column":1,"offset":15967},"end":{"line":922,"column":7,"offset":15973},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const node = graph.findById('node');\n
undefined","position":{"start":{"line":940,"column":31,"offset":16258},"end":{"line":940,"column":42,"offset":16269},"indent":[]}},{"type":"text","value":"。","position":{"start":{"line":940,"column":42,"offset":16269},"end":{"line":940,"column":43,"offset":16270},"indent":[]}}],"position":{"start":{"line":940,"column":3,"offset":16230},"end":{"line":940,"column":43,"offset":16270},"indent":[]}}],"position":{"start":{"line":940,"column":1,"offset":16228},"end":{"line":940,"column":43,"offset":16270},"indent":[]}}],"position":{"start":{"line":939,"column":1,"offset":16213},"end":{"line":940,"column":43,"offset":16270},"indent":[1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":942,"column":3,"offset":16274},"end":{"line":942,"column":5,"offset":16276},"indent":[]}}],"position":{"start":{"line":942,"column":1,"offset":16272},"end":{"line":942,"column":7,"offset":16278},"indent":[]}}],"position":{"start":{"line":942,"column":1,"offset":16272},"end":{"line":942,"column":7,"offset":16278},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const nodes = graph.findAll('node', node => {\n return node.get('model').x;\n});\n
// 查询所有选中的元素\nconst nodes = graph.findAllByState('node', 'selected');\n
{\nnodes: [],\nedges: [],\ngroups: [],\n}
const nodes = graph.getNodes();\n
const edges = graph.getEdges();\n
","position":{"start":{"line":1024,"column":62,"offset":17262},"end":{"line":1024,"column":68,"offset":17268},"indent":[]}},{"type":"image","title":null,"url":"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","position":{"start":{"line":1024,"column":68,"offset":17268},"end":{"line":1024,"column":311,"offset":17511},"indent":[]}}],"position":{"start":{"line":1024,"column":1,"offset":17201},"end":{"line":1024,"column":311,"offset":17511},"indent":[]}},{"type":"heading","depth":3,"children":[{"type":"link","url":"#getpointbyclientclientx-clienty","title":null,"children":[],"data":{"hProperties":{"aria-label":"getpointbyclientclientx clienty permalink","class":"anchor"},"hChildren":[{"type":"raw","value":""}]}},{"type":"text","value":"getPointByClient(clientX, clientY)","position":{"start":{"line":1025,"column":5,"offset":17516},"end":{"line":1025,"column":39,"offset":17550},"indent":[]}}],"position":{"start":{"line":1025,"column":1,"offset":17512},"end":{"line":1025,"column":39,"offset":17550},"indent":[]},"data":{"id":"getpointbyclientclientx-clienty","htmlAttributes":{"id":"getpointbyclientclientx-clienty"},"hProperties":{"id":"getpointbyclientclientx-clienty"}}},{"type":"paragraph","children":[{"type":"text","value":"将屏幕/页面坐标转换为视口坐标。","position":{"start":{"line":1026,"column":1,"offset":17551},"end":{"line":1026,"column":17,"offset":17567},"indent":[]}}],"position":{"start":{"line":1026,"column":1,"offset":17551},"end":{"line":1026,"column":17,"offset":17567},"indent":[]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"参数","position":{"start":{"line":1028,"column":3,"offset":17571},"end":{"line":1028,"column":5,"offset":17573},"indent":[]}}],"position":{"start":{"line":1028,"column":1,"offset":17569},"end":{"line":1028,"column":7,"offset":17575},"indent":[]}},{"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},"indent":[1,1,1,1]}}],"position":{"start":{"line":1028,"column":1,"offset":17569},"end":{"line":1032,"column":38,"offset":17701},"indent":[1,1,1,1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"返回值","position":{"start":{"line":1035,"column":3,"offset":17706},"end":{"line":1035,"column":6,"offset":17709},"indent":[]}}],"position":{"start":{"line":1035,"column":1,"offset":17704},"end":{"line":1035,"column":8,"offset":17711},"indent":[]}}],"position":{"start":{"line":1035,"column":1,"offset":17704},"end":{"line":1035,"column":8,"offset":17711},"indent":[]}},{"type":"list","ordered":false,"start":null,"spread":false,"children":[{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"返回值类型：Object；","position":{"start":{"line":1037,"column":3,"offset":17715},"end":{"line":1037,"column":16,"offset":17728},"indent":[]}}],"position":{"start":{"line":1037,"column":3,"offset":17715},"end":{"line":1037,"column":16,"offset":17728},"indent":[]}}],"position":{"start":{"line":1037,"column":1,"offset":17713},"end":{"line":1037,"column":16,"offset":17728},"indent":[]}},{"type":"listItem","spread":false,"checked":null,"children":[{"type":"paragraph","children":[{"type":"text","value":"包含的属性：x 和 y 属性，分别表示视口的 x 、y 坐标。","position":{"start":{"line":1038,"column":3,"offset":17731},"end":{"line":1038,"column":34,"offset":17762},"indent":[]}}],"position":{"start":{"line":1038,"column":3,"offset":17731},"end":{"line":1038,"column":34,"offset":17762},"indent":[]}}],"position":{"start":{"line":1038,"column":1,"offset":17729},"end":{"line":1038,"column":34,"offset":17762},"indent":[]}}],"position":{"start":{"line":1037,"column":1,"offset":17713},"end":{"line":1038,"column":34,"offset":17762},"indent":[1]}},{"type":"paragraph","children":[{"type":"strong","children":[{"type":"text","value":"用法","position":{"start":{"line":1040,"column":3,"offset":17766},"end":{"line":1040,"column":5,"offset":17768},"indent":[]}}],"position":{"start":{"line":1040,"column":1,"offset":17764},"end":{"line":1040,"column":7,"offset":17770},"indent":[]}}],"position":{"start":{"line":1040,"column":1,"offset":17764},"end":{"line":1040,"column":7,"offset":17770},"indent":[]}},{"type":"html","lang":"javascript","meta":null,"value":"const point = graph.getPointByClient(e.clientX, e.clientY);\nconsole.log('视口x/y坐标分别为:', point.x, point.y);\n
const point = graph.getClientByPoint(100, 200);\nconsole.log('屏幕/页面x/y坐标分别为:', point.x, point.y);\n
const point = graph.getPointByCanvas(100, 200);\nconsole.log('视口x/y坐标分别为:', point.x, point.y);\n
const point = graph.getCanvasByPoint(100, 200);\nconsole.log('Canvas画布的x/y坐标分别为:', point.x, point.y);\n
import miniMap from '@antv/g6/build/minimap';\ngraph.Plugin(miniMap);\n
import miniMap from '@antv/g6/build/minimap';\ngraph.removePlugin(miniMap);\n
// 获取group\nconst group = graph.get('group');\n\n// 获取canvas实例\nconst canvas = graph.get('canvas');\n\n// 获取autoPaint值\nconst autoPaint = graph.get('autoPaint');\n
// 设置capture值为false\ngraph.set('capture', false);\n\n// 设置customGroup值为group\ngraph.set('customGroup', group);\n\n// 设置nodeIdList值为数组\ngraph.set('nodeIdList', [1, 3, 5]);\n
const dataURL = graph.toDataURL();\n