{"expireTime":9007200828528711000,"key":"transformer-remark-markdown-html-3707292c8fb7991d858a1f60d008ca5d-gatsby-remark-prettiergatsby-remark-prismjsgatsby-remark-external-linksgatsby-remark-autolink-headersgatsby-remark-reading-time-","val":"

G6 封装了一系列交互方法，方便用户直接使用。本文将为 Tutorial案例 增加简单的交互：hover 节点、点击节点、点击边、放缩画布、拖拽画布。本节目标效果如下：
\"tutorial-demo-interact.gif\"

\n
图1 Tutorial案例的交互效果。
\n

基本概念

\n

交互行为 Behavior

\n

G6 中的交互行为。G6 内置了一系列交互行为，用户可以直接使用。简单地理解，就是可以一键开启这些交互行为：

\n\n

如果内置行为不满足需求，G6 还允许用户进行自定义交互行为。由于自定义交互较为复杂，入门教程中不再赘述，如有需求请参见：自定义交互行为 Behavior

\n

交互管理 mode

\n

mode 是 G6 交互行为的管理机制，一个 mode 是多种行为 Behavior 的组合，允许用户通过切换不同的模式进行交互行为的管理。由于该概念较为复杂，在本入门教程中，读者不需要对该机制深入理解。如有需求，参见 G6 中的 mode。

\n

交互状态 State

\n

状态 State 是 G6 中的状态机制。用户可以为图中的元素（节点/边）设置不同的状态及不同状态下的样式。在状态发生变化时，G6 自动更新元素的样式。例如，可以为节点设置状态 'click' 为 true 或 false，并为节点设置 'click' 的样式为加粗节点边框。当 'click' 状态被切换为 true 时，节点的边框将会被加粗，'click' 状态被切换为 false 时，节点的样式恢复到默认。在下面的使用方法中，将会有具体例子。

\n

使用方法

\n

拖拽、缩放——内置的交互行为

\n

在 G6 中使用内置 behavior 的方式非常简单，只需要在图实例化时配置 modes。拖拽和缩放属于 G6 内置交互行为，修改代码如下：

\n
const graph = new G6.Graph({\n  ...                                          // 其他配置项\n  modes: {\n    default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]  // 允许拖拽画布、放缩画布、拖拽节点\n  }\n});
\n

除了直接使用内置交互名称外，也可以为 behavior 配置参数，例如放缩画布的敏感度、最大/最小放缩程度等。高阶用法参见 内置的交互 Behavior。

\n

上面代码中的 modes 定义了 G6 的模式，default 是默认的模式，还可以允许有其他的模式，比如：编辑模式 edit 等。不同的模式，用户能进行的行为可以不同，比如默认模式能拖拽画布，编辑模式不允许拖拽画布：

\n
// 举例解释不同模式\nmodes: {\n  default: ['drag-canvas'],\n  edit: []\n}
\n
\n

更多关于模式、行为可以参考: [TODO: 链接]

\n
\n

Hover、Click 改变样式——状态式交互

\n

有时我们希望通过交互可以将元素样式变成特定样式，如我们看到的图 1 中，鼠标 hover 节点、点击节点、点击边时，样式发生了变化。这里涉及到了 G6 中 状态 State 的概念。简单地说，是否 hover 、click 、任何操作（可以是自己起的状态名），都可以称为一种状态（state）。用户可以自由设置不同状态下的元素样式。要达到交互更改元素样式，需要两步：

\n\n

设置各状态下的元素样式

\n

在实例化图时，通过 nodeStateStyles 和 edgeStateStyles 两个配置项可以配置元素在不同状态下的样式。
为达到 Tutorial案例 中的效果：

\n\n

下面代码设置了节点分别在 hover 和 click 状态为 true 时的样式，边在 click 状态为 true 时的样式：

\n
const graph = new G6.Graph({\n  // ...                           // 其他配置项\n  // 节点不同状态下的样式集合\n  nodeStateStyles: {\n    // 鼠标 hover 上节点，即 hover 状态为 true 时的样式\n    hover: {\n      fill: 'lightsteelblue',\n    },\n    // 鼠标点击节点，即 click 状态为 true 时的样式\n    click: {\n      stroke: '#000',\n      lineWidth: 3,\n    },\n  },\n  // 节点不同状态下的样式集合\n  edgeStateStyles: {\n    // 鼠标点击边，即 click 状态为 true 时的样式\n    click: {\n      stroke: 'steelblue',\n    },\n  },\n});\n
\n

监听事件并切换元素状态

\n

G6 中所有元素监听都挂载在图实例上，如下代码中的 graph 对象是 G6.Graph 的实例，graph.on() 函数监听了某元素类型（node / edge）的某种事件（click / mouseenter / mouseleave / ... 所有事件参见：Event API）。

\n
// 在图实例 graph 上监听\ngraph.on('元素类型:事件名', e => {\n  // do something\n});\n
\n

现在，我们通过下面代码，为 Tutorial案例 增加点和边上的监听事件，并在监听函数里使用 graph.setItemState() 改变元素的状态：

\n
// 鼠标进入节点\ngraph.on('node:mouseenter', e => {\n  const nodeItem = e.item;  // 获取鼠标进入的节点元素对象\n  graph.setItemState(nodeItem, 'hover', true);  // 设置当前节点的 hover 状态为 true\n});\n\n// 鼠标离开节点\ngraph.on('node:mouseleave', e => {\n  const nodeItem = e.item;  // 获取鼠标离开的节点元素对象\n  graph.setItemState(nodeItem, 'hover', false); // 设置当前节点的 hover 状态为 false\n});\n\n// 点击节点\ngraph.on('node:click', e => {\n  // 先将所有当前是 click 状态的节点置为非 click 状态\n  const clickNodes = graph.findAllByState('node', 'click');\n  clickNodes.forEach(cn => {\n    graph.setItemState(cn, 'click', false);\n  });\n  const nodeItem = e.item;  // 获取被点击的节点元素对象\n  graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true\n});\n\n// 点击边\ngraph.on('edge:click', e => {\n  // 先将所有当前是 click 状态的边置为非 click 状态\n  const clickEdges = graph.findAllByState('edge', 'click');\n    clickEdges.forEach(ce => {\n      graph.setItemState(ce, 'click', false);\n    });\n    const edgeItem = e.item;  // 获取被点击的边元素对象\n    graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true\n  });\n});
\n

完整代码

\n

至此，完整代码如下：

\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Tutorial Demo</title>\n</head>\n<body>\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    const graph = new G6.Graph({\n      container: 'mountNode',\n      width: 800,\n      height: 600,\n      // 节点默认配置\n      defaultNode: {\n        labelCfg: {\n          style: {\n            fill: '#fff'\n          }\n        }\n      },\n      // 边默认配置\n      defaultEdge: {\n        labelCfg: {\n          autoRotate: true\n        }\n      },\n      // 节点在各状态下的样式\n      nodeStateStyles: {\n        // hover 状态为 true 时的样式\n        hover: {\n          fill: 'lightsteelblue'\n        },\n        // click 状态为 true 时的样式\n        click: {\n          stroke: '#000',\n          lineWidth: 3\n        }\n      },\n      // 边在各状态下的样式\n      edgeStateStyles: {\n        // click 状态为 true 时的样式\n        click: {\n          stroke: 'steelblue'\n        }\n      },\n      // 布局\n      layout: {\n        type: 'force',\n        linkDistance: 100,\n        preventOverlap: true,\n        nodeStrength: -30,\n        edgeStrength: 0.1\n      },\n      // 内置交互\n      modes: {\n        default: [ 'drag-canvas', 'zoom-canvas', 'drag-node' ]\n      },\n    });\n\n    const main = async () => {\n      const response = await fetch(\n        'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json'\n      );\n      const remoteData = await response.json();\n      \n      const nodes = remoteData.nodes;\n      const edges = remoteData.edges;\n      nodes.forEach(node => {\n        if (!node.style) {\n          node.style = {};\n        }\n        node.style.lineWidth = 1;\n        node.style.stroke = '#666';\n        node.style.fill = 'steelblue';\n        switch (node.class) {\n          case 'c0': {\n            node.shape = 'circle';\n            node.size = 30;\n            break;\n          }\n          case 'c1': {\n            node.shape = 'rect';\n            node.size = [ 35, 20 ];\n            break;\n          }\n          case 'c2': {\n            node.shape = 'ellipse';\n            node.size = [ 35, 20 ];\n            break;\n          }\n        }\n      });\n      edges.forEach(edge => {\n        if (!edge.style) {\n          edge.style = {};\n        }\n        edge.style.lineWidth = edge.weight;\n        edge.style.opacity = 0.6;\n        edge.style.stroke = 'grey';\n      });\n\n      graph.data(remoteData);\n      graph.render();\n\n      // 监听鼠标进入节点\n      graph.on('node:mouseenter', e => {\n        const nodeItem = e.item;\n        // 设置目标节点的 hover 状态 为 true\n        graph.setItemState(nodeItem, 'hover', true);\n      });\n      // 监听鼠标离开节点\n      graph.on('node:mouseleave', e => {\n        const nodeItem = e.item;\n        // 设置目标节点的 hover 状态 false\n        graph.setItemState(nodeItem, 'hover', false);\n      });\n      // 监听鼠标点击节点\n      graph.on('node:click', e => {\n        // 先将所有当前有 click 状态的节点的 click 状态置为 false\n        const clickNodes = graph.findAllByState('node', 'click');\n        clickNodes.forEach(cn => {\n          graph.setItemState(cn, 'click', false);\n        });\n        const nodeItem = e.item;\n        // 设置目标节点的 click 状态 为 true\n        graph.setItemState(nodeItem, 'click', true);\n      });\n      // 监听鼠标点击节点\n      graph.on('edge:click', e => {\n        // 先将所有当前有 click 状态的边的 click 状态置为 false\n        const clickEdges = graph.findAllByState('edge', 'click');\n        clickEdges.forEach(ce => {\n          graph.setItemState(ce, 'click', false);\n        });\n        const edgeItem = e.item;\n        // 设置目标边的 click 状态 为 true\n        graph.setItemState(edgeItem, 'click', true);\n      });\n    };\n    main();\n  </script>\n</body>\n</html>
\n

 注意 
若需更换数据，请替换 'https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json' 为新的数据文件地址。

"}