{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-ast-fde852edd4249c7c6987617519f8bb59-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":"本章以添加节点及在两个节点之间连线为例进行介绍 G6 中的交互。在阅读本章之前，需要先熟悉以下内容：","position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":51,"offset":51}}}],"position":{"start":{"line":2,"column":1,"offset":1},"end":{"line":2,"column":51,"offset":51}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/self-behavior","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"自定义交互行为 Behavior","position":{"start":{"line":4,"column":4,"offset":56},"end":{"line":4,"column":20,"offset":72}}}],"position":{"start":{"line":4,"column":3,"offset":55},"end":{"line":4,"column":66,"offset":118}}},{"type":"text","value":"；","position":{"start":{"line":4,"column":66,"offset":118},"end":{"line":4,"column":67,"offset":119}}}],"position":{"start":{"line":4,"column":1,"offset":53},"end":{"line":4,"column":67,"offset":119}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://www.yuque.com/antv/g6/g6-mode","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"交互模式 Mode","position":{"start":{"line":5,"column":4,"offset":123},"end":{"line":5,"column":13,"offset":132}}}],"position":{"start":{"line":5,"column":3,"offset":122},"end":{"line":5,"column":53,"offset":172}}},{"type":"text","value":"。","position":{"start":{"line":5,"column":53,"offset":172},"end":{"line":5,"column":54,"offset":173}}}],"position":{"start":{"line":5,"column":1,"offset":120},"end":{"line":5,"column":54,"offset":173}}},{"type":"text","value":"\n"}],"position":{"start":{"line":4,"column":1,"offset":53},"end":{"line":5,"column":54,"offset":173}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://cdn.nlark.com/yuque/0/2019/gif/156681/1571207486613-09820b48-f565-40c4-b8f8-6238b063edb2.gif#align=left&display=inline&height=268&name=interact-add.gif&originHeight=427&originWidth=411&search=&size=202897&status=done&width=258","alt":"interact-add.gif"},"children":[],"position":{"start":{"line":7,"column":1,"offset":175},"end":{"line":7,"column":256,"offset":430}}},{"type":"raw","value":"
","position":{"start":{"line":7,"column":256,"offset":430},"end":{"line":7,"column":262,"offset":436}}},{"type":"text","value":"上图是本文要实现的最终效果。完整 demo 代码参见：","position":{"start":{"line":7,"column":262,"offset":436},"end":{"line":7,"column":289,"offset":463}}},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/Yanyan-Wang/pen/qBBNaye","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"动态添加元素","position":{"start":{"line":7,"column":290,"offset":464},"end":{"line":7,"column":296,"offset":470}}}],"position":{"start":{"line":7,"column":289,"offset":463},"end":{"line":7,"column":341,"offset":515}}},{"type":"text","value":"。","position":{"start":{"line":7,"column":341,"offset":515},"end":{"line":7,"column":342,"offset":516}}},{"type":"raw","value":"
","position":{"start":{"line":7,"column":342,"offset":516},"end":{"line":7,"column":348,"offset":522}}},{"type":"text","value":"方下拉菜单中有三个选项，用于切换交互模式 mode：","position":{"start":{"line":7,"column":348,"offset":522},"end":{"line":7,"column":374,"offset":548}}}],"position":{"start":{"line":7,"column":1,"offset":175},"end":{"line":7,"column":374,"offset":548}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"选择“默认”按钮时，切换到 default 交互模式：拖拽节点时节点跟随鼠标移动；点击节点时选中该节点；","position":{"start":{"line":9,"column":3,"offset":552},"end":{"line":9,"column":55,"offset":604}}}],"position":{"start":{"line":9,"column":1,"offset":550},"end":{"line":9,"column":55,"offset":604}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"选择“添加节点”按钮时，切换到 addNode 交互模式：点击空白区域在点击处增加一个节点；点击节点时选中该节点；","position":{"start":{"line":10,"column":3,"offset":607},"end":{"line":10,"column":60,"offset":664}}}],"position":{"start":{"line":10,"column":1,"offset":605},"end":{"line":10,"column":60,"offset":664}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"选择“添加边”按钮时，切换到 addEdge 交互模式：依次点击两个节点将会在这两个节点之间添加一条边。","position":{"start":{"line":11,"column":3,"offset":667},"end":{"line":11,"column":55,"offset":719}}}],"position":{"start":{"line":11,"column":1,"offset":665},"end":{"line":11,"column":55,"offset":719}}},{"type":"text","value":"\n"}],"position":{"start":{"line":9,"column":1,"offset":550},"end":{"line":11,"column":55,"offset":719}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"使用多个 mode 的原因","position":{"start":{"line":13,"column":3,"offset":723},"end":{"line":13,"column":16,"offset":736}}}],"position":{"start":{"line":13,"column":1,"offset":721},"end":{"line":13,"column":18,"offset":738}}},{"type":"raw","value":"
","position":{"start":{"line":13,"column":18,"offset":738},"end":{"line":13,"column":24,"offset":744}}},{"type":"text","value":"  相同的鼠标操作，在不同场景下有不同的含义。例如：","position":{"start":{"line":13,"column":24,"offset":744},"end":{"line":13,"column":50,"offset":770}}}],"position":{"start":{"line":13,"column":1,"offset":721},"end":{"line":13,"column":50,"offset":770}}},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"点击空白画布取消目前图上所有节点的选中状态、点击空白画布在响应位置添加节点，这两种需求都对应了用户点击画布空白处的操作；","position":{"start":{"line":15,"column":3,"offset":774},"end":{"line":15,"column":63,"offset":834}}}],"position":{"start":{"line":15,"column":1,"offset":772},"end":{"line":15,"column":63,"offset":834}}},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"点击选中、点击两个节点添加边都涉及到了鼠标在节点上的点击操作。","position":{"start":{"line":16,"column":3,"offset":837},"end":{"line":16,"column":34,"offset":868}}}],"position":{"start":{"line":16,"column":1,"offset":835},"end":{"line":16,"column":34,"offset":868}}},{"type":"text","value":"\n"}],"position":{"start":{"line":15,"column":1,"offset":772},"end":{"line":16,"column":34,"offset":868}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"为了区分这些操作的含义，我们使用交互模式 mode 划分不同的场景。","position":{"start":{"line":18,"column":1,"offset":870},"end":{"line":18,"column":35,"offset":904}}},{"type":"raw","value":"
","position":{"start":{"line":18,"column":35,"offset":904},"end":{"line":18,"column":41,"offset":910}}}],"position":{"start":{"line":18,"column":1,"offset":870},"end":{"line":18,"column":41,"offset":910}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"前提代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%89%8D%E6%8F%90%E4%BB%A3%E7%A0%81","aria-label":"前提代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"前提代码","position":{"start":{"line":21,"column":4,"offset":916},"end":{"line":21,"column":8,"offset":920}}}],"position":{"start":{"line":21,"column":1,"offset":913},"end":{"line":21,"column":8,"offset":920}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面 HTML 代码是本文的基础代码，后续功能将在这份代码中增量添加。下面代码定义了左上方的下拉菜单，以及后面将会用到图上的初始数据 ","position":{"start":{"line":22,"column":1,"offset":921},"end":{"line":22,"column":68,"offset":988}}},{"type":"raw","value":"data","position":{"start":{"line":22,"column":68,"offset":988},"end":{"line":22,"column":74,"offset":994}}},{"type":"text","value":"。","position":{"start":{"line":22,"column":74,"offset":994},"end":{"line":22,"column":75,"offset":995}}}],"position":{"start":{"line":22,"column":1,"offset":921},"end":{"line":22,"column":75,"offset":995}}},{"type":"text","value":"\n"},{"type":"raw","value":"
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Interactively Add</title>\n</head>\n<body>\n  <!-- 左上方的下拉菜单 -->\n  <select id=\"selector\">\n    <option value=\"default\">默认</option>\n    <option value=\"addNode\">添加节点</option>\n    <option value=\"addEdge\">添加边</option>\n  </select>\n  <div id=\"mountNode\"></div>\n  <script src=\"https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js\"></script>\n  <script>\n    // 初始数据\n  \tconst data = {\n      nodes: [{\n        id: 'node1',\n        x: 100,\n        y: 200\n     },{\n        id: 'node2',\n        x: 300,\n        y: 200\n     },{\n        id: 'node3',\n        x: 300,\n        y: 300\n     }],\n      edges: [{\n        id: 'edge1',\n        target: 'node2',\n        source: 'node1'\n     }]\n    };\n  </script>\n</body>\n</html>
","position":{"start":{"line":23,"column":1,"offset":996},"end":{"line":64,"column":4,"offset":1794}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"配置交互模式"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E9%85%8D%E7%BD%AE%E4%BA%A4%E4%BA%92%E6%A8%A1%E5%BC%8F","aria-label":"配置交互模式 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"配置交互模式","position":{"start":{"line":67,"column":4,"offset":1800},"end":{"line":67,"column":10,"offset":1806}}}],"position":{"start":{"line":67,"column":1,"offset":1797},"end":{"line":67,"column":10,"offset":1806}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"下面代码实例化了图，并配置了交互模式的集合 ","position":{"start":{"line":68,"column":1,"offset":1807},"end":{"line":68,"column":23,"offset":1829}}},{"type":"raw","value":"modes","position":{"start":{"line":68,"column":23,"offset":1829},"end":{"line":68,"column":30,"offset":1836}}},{"type":"text","value":"，其中包括 ","position":{"start":{"line":68,"column":30,"offset":1836},"end":{"line":68,"column":36,"offset":1842}}},{"type":"raw","value":"default","position":{"start":{"line":68,"column":36,"offset":1842},"end":{"line":68,"column":45,"offset":1851}}},{"type":"text","value":" 默认交互模式、","position":{"start":{"line":68,"column":45,"offset":1851},"end":{"line":68,"column":53,"offset":1859}}},{"type":"raw","value":"addNode","position":{"start":{"line":68,"column":53,"offset":1859},"end":{"line":68,"column":62,"offset":1868}}},{"type":"text","value":" 增加节点交互模式、","position":{"start":{"line":68,"column":62,"offset":1868},"end":{"line":68,"column":72,"offset":1878}}},{"type":"raw","value":"addEdge","position":{"start":{"line":68,"column":72,"offset":1878},"end":{"line":68,"column":81,"offset":1887}}},{"type":"text","value":" 增加边交互模式。每种交互模式中都包含了各自的交互行为，其中 ","position":{"start":{"line":68,"column":81,"offset":1887},"end":{"line":68,"column":112,"offset":1918}}},{"type":"raw","value":"'drag-node'","position":{"start":{"line":68,"column":112,"offset":1918},"end":{"line":68,"column":125,"offset":1931}}},{"type":"text","value":"（拖拽节点） 和 ","position":{"start":{"line":68,"column":125,"offset":1931},"end":{"line":68,"column":134,"offset":1940}}},{"type":"raw","value":"'click-select'","position":{"start":{"line":68,"column":134,"offset":1940},"end":{"line":68,"column":150,"offset":1956}}},{"type":"text","value":"（点击选中） 是 G6 内置的交互行为，","position":{"start":{"line":68,"column":150,"offset":1956},"end":{"line":68,"column":170,"offset":1976}}},{"type":"raw","value":"'click-add-node'","position":{"start":{"line":68,"column":170,"offset":1976},"end":{"line":68,"column":188,"offset":1994}}},{"type":"text","value":"（点击空白画布添加节点） 和 ","position":{"start":{"line":68,"column":188,"offset":1994},"end":{"line":68,"column":203,"offset":2009}}},{"type":"raw","value":"'click-add-edge'","position":{"start":{"line":68,"column":203,"offset":2009},"end":{"line":68,"column":221,"offset":2027}}},{"type":"text","value":"（点击两个节点添加边） 需要我们在后面进行自定义。","position":{"start":{"line":68,"column":221,"offset":2027},"end":{"line":68,"column":246,"offset":2052}}}],"position":{"start":{"line":68,"column":1,"offset":1807},"end":{"line":68,"column":246,"offset":2052}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// const data = ...\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 500,\n  height: 500,\n  // 交互模式集合\n  modes: {\n    // 默认交互模式\n    default: ['drag-node', 'click-select'],\n    // 增加节点交互模式\n    addNode: ['click-add-node', 'click-select'],\n    // 增加边交互模式\n    addEdge: ['click-add-edge', 'click-select'],\n  },\n});\n\ngraph.data(data);\ngraph.render();\n\n// 监听左上角下拉菜单的变化，根据其变化切换图的交互模式\ndocument.getElementById('selector').addEventListener('change', e => {\n  const value = e.target.value;\n  // 切换交互模式\n  graph.setMode(value);\n});\n
","position":{"start":{"line":69,"column":1,"offset":2053},"end":{"line":95,"column":4,"offset":2600}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"添加节点"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%B7%BB%E5%8A%A0%E8%8A%82%E7%82%B9","aria-label":"添加节点 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"添加节点","position":{"start":{"line":98,"column":6,"offset":2608},"end":{"line":98,"column":10,"offset":2612}}}],"position":{"start":{"line":98,"column":1,"offset":2603},"end":{"line":98,"column":10,"offset":2612}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在上面的实例中，当选中添加节点按钮时，会切换到添加节点的 Mode 上。实现在点击空白画布时，在点击位置添加节点的方式是通过 ","position":{"start":{"line":99,"column":1,"offset":2613},"end":{"line":99,"column":64,"offset":2676}}},{"type":"raw","value":"G6.registerBehavior","position":{"start":{"line":99,"column":64,"offset":2676},"end":{"line":99,"column":85,"offset":2697}}},{"type":"text","value":" 自定义名为 ","position":{"start":{"line":99,"column":85,"offset":2697},"end":{"line":99,"column":92,"offset":2704}}},{"type":"raw","value":"'click-add-node'","position":{"start":{"line":99,"column":92,"offset":2704},"end":{"line":99,"column":110,"offset":2722}}},{"type":"text","value":"（名字可以自由设定） 的 Behavior 实现的 。","position":{"start":{"line":99,"column":110,"offset":2722},"end":{"line":99,"column":137,"offset":2749}}}],"position":{"start":{"line":99,"column":1,"offset":2613},"end":{"line":99,"column":137,"offset":2749}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 封装点击添加边的交互\nG6.registerBehavior('click-add-node', {\n  // 设定该自定义行为需要监听的事件及其响应函数\n  getEvents() {\n    // 监听的事件为 cnavas:click，响应函数时 onClick\n    return {\n      'canvas:click': 'onClick',\n    };\n  },\n  // 点击事件\n  onClick(ev) {\n    const graph = this.graph;\n    // 在图上新增一个节点\n    const node = graph.addItem('node', {\n      x: ev.x,\n      y: ev.y,\n      id: G6.Util.uniqueId(), // 生成唯一的 id\n    });\n  },\n});\n
","position":{"start":{"line":100,"column":1,"offset":2750},"end":{"line":121,"column":4,"offset":3161}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"添加边"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E6%B7%BB%E5%8A%A0%E8%BE%B9","aria-label":"添加边 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"添加边","position":{"start":{"line":123,"column":6,"offset":3168},"end":{"line":123,"column":9,"offset":3171}}}],"position":{"start":{"line":123,"column":1,"offset":3163},"end":{"line":123,"column":9,"offset":3171}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"在上面的案例中，当需要在两个节点之间连线时，要先切换到添加边的 Mode 上。下面代码自定义了名为 ","position":{"start":{"line":124,"column":1,"offset":3172},"end":{"line":124,"column":51,"offset":3222}}},{"type":"raw","value":"'click-add-edge'","position":{"start":{"line":124,"column":51,"offset":3222},"end":{"line":124,"column":69,"offset":3240}}},{"type":"text","value":"（名字可以自由设定）的 Behavior 实现两个节点之间连线。","position":{"start":{"line":124,"column":69,"offset":3240},"end":{"line":124,"column":101,"offset":3272}}}],"position":{"start":{"line":124,"column":1,"offset":3172},"end":{"line":124,"column":101,"offset":3272}}},{"type":"text","value":"\n"},{"type":"raw","value":"
// 封装点击添加边的交互\nG6.registerBehavior('click-add-edge', {\n  // 设定该自定义行为需要监听的事件及其响应函数\n  getEvents() {\n    return {\n      'node:click': 'onClick', // 监听事件 node:click，响应函数时 onClick\n      mousemove: 'onMousemove', // 监听事件 mousemove，响应函数时 onMousemove\n      'edge:click': 'onEdgeClick', // 监听事件 edge:click，响应函数时 onEdgeClick\n    };\n  },\n  // getEvents 中定义的 'node:click' 的响应函数\n  onClick(ev) {\n    const node = ev.item;\n    const graph = this.graph;\n    // 鼠标当前点击的节点的位置\n    const point = { x: ev.x, y: ev.y };\n    const model = node.getModel();\n    if (this.addingEdge && this.edge) {\n      graph.updateItem(this.edge, {\n        target: model.id,\n      });\n\n      this.edge = null;\n      this.addingEdge = false;\n    } else {\n      // 在图上新增一条边，结束点是鼠标当前点击的节点的位置\n      this.edge = graph.addItem('edge', {\n        source: model.id,\n        target: point,\n      });\n      this.addingEdge = true;\n    }\n  },\n  // getEvents 中定义的 mousemove 的响应函数\n  onMousemove(ev) {\n    // 鼠标的当前位置\n    const point = { x: ev.x, y: ev.y };\n    if (this.addingEdge && this.edge) {\n      // 更新边的结束点位置为当前鼠标位置\n      this.graph.updateItem(this.edge, {\n        target: point,\n      });\n    }\n  },\n  // getEvents 中定义的 'edge:click' 的响应函数\n  onEdgeClick(ev) {\n    const currentEdge = ev.item;\n    // 拖拽过程中，点击会点击到新增的边上\n    if (this.addingEdge && this.edge == currentEdge) {\n      graph.removeItem(this.edge);\n      this.edge = null;\n      this.addingEdge = false;\n    }\n  },\n});\n
","position":{"start":{"line":125,"column":1,"offset":3273},"end":{"line":181,"column":4,"offset":4714}}},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"完整代码"},"children":[{"type":"element","tagName":"a","properties":{"href":"#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81","aria-label":"完整代码 permalink","class":"anchor"},"children":[{"type":"raw","value":""}]},{"type":"text","value":"完整代码","position":{"start":{"line":183,"column":4,"offset":4719},"end":{"line":183,"column":8,"offset":4723}}}],"position":{"start":{"line":183,"column":1,"offset":4716},"end":{"line":183,"column":8,"offset":4723}}},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"完整 demo 代码参见：","position":{"start":{"line":184,"column":1,"offset":4724},"end":{"line":184,"column":14,"offset":4737}}},{"type":"element","tagName":"a","properties":{"href":"https://codepen.io/Yanyan-Wang/pen/qBBNaye","target":"_self","rel":"nofollow"},"children":[{"type":"text","value":"动态添加元素","position":{"start":{"line":184,"column":15,"offset":4738},"end":{"line":184,"column":21,"offset":4744}}}],"position":{"start":{"line":184,"column":14,"offset":4737},"end":{"line":184,"column":66,"offset":4789}}},{"type":"text","value":"。","position":{"start":{"line":184,"column":66,"offset":4789},"end":{"line":184,"column":67,"offset":4790}}}],"position":{"start":{"line":184,"column":1,"offset":4724},"end":{"line":184,"column":67,"offset":4790}}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":185,"column":1,"offset":4791}}}}