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

节点与边在视觉上的层级涉及到了它们相对应的图形分组 Group。本文提到的所有分组 Group 都为 G6 的 图形分组 Group，而非 G6 的 节点分组 Group，请注意区分这两种 Group，其区别在 图形分组 Group 中说明。

\n

在 图形分组 Group 中我们提到：在 G6 中，Graph 的一个实例中的所有节点属于同一个变量名为 nodeGroup 的 group，所有的边属于同一个变量名为 edgeGroup 的 group。节点 group 在视觉上的层级（zIndex）高于边 group，即所有节点会绘制在所有边的上层。

\n

但有时，我们需要让边在视觉上在节点上层。例如，高亮节点及其相关边和邻居、高亮一条边等。可以通过配合图实例的配置项 groupByTypes 以及节点和边的 toFront() 与 toBack() 函数实现。为实现如下效果：鼠标进入节点时，提升相关边以及邻居节点的层级；离开节点时恢复；鼠标进入边时，提升边及其两端点的层级；离开边时恢复。Demo 完整代码。
\"highlight-edge-node.gif\"

\n

要实现上图效果，需要以下步骤：

\n\n

\n

前提代码

\n

下面代码完成了引入 G6、数据设置、实例化图、渲染图的命令等。后文将修改下面这份代码中以达到上图高亮效果。

\n
// 数据源\nconst data = {\n  nodes: [\n    {\n      id: 'node0',\n      x: 100,\n      y: 100,\n      size: 20,\n    },\n    {\n      id: 'node1',\n      x: 200,\n      y: 200,\n      size: 20,\n    },\n    {\n      id: 'node2',\n      x: 150,\n      y: 150,\n      size: 20,\n    },\n    {\n      id: 'node3',\n      x: 150,\n      y: 250,\n      size: 20,\n    },\n    {\n      id: 'node4',\n      x: 150,\n      y: 200,\n      size: 20,\n    },\n  ],\n  edges: [\n    {\n      id: 'edge0',\n      source: 'node0',\n      target: 'node1',\n    },\n    {\n      id: 'edge1',\n      source: 'node2',\n      target: 'node3',\n    },\n  ],\n};\n\n// 实例化图\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  // 为方便演示，加粗边\n  defaultEdge: {\n    style: {\n      lineWidth: 2,\n    },\n  },\n});\n\n// 读取数据\ngraph.data(data);\n// 渲染图\ngraph.render();\n
\n

\n

Step 1 实例化图时的配置

\n

groupByTypes 是图的一个配置项，当其为默认值 true 时，所有节点在一个名为 nodeGroup 的分组，所有边在另一个名为 edgeGroup 的分组，且 nodeGroup 在 edgeGroup 上层。将其设置为 false 后，将不存在 nodeGroup 和 edgeGroup，所有节点和边在同一个分组，它们的层级根据生成的顺序决定。

\n

\n

参数描述

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
名称类型默认值描述
groupByTypesBooleantrue各种元素是否在一个分组内，决定节点和边的层级问题，默认情况下所有的节点在一个分组中，所有的边在一个分组中，当这个参数为 false 时，节点和边的层级根据生成的顺序确定。
\n

\n

使用方式

\n

更改 前提代码 中实例化图部分代码，添加 groupByTypes 配置项，并设置为 false：

\n
const graph = new G6.Graph({\n  // ...  // 其他配置\n  groupByTypes: false,\n});\n
\n

此时，将会得到如下效果：
\"image.png\"

\n

\n

Step 2 将节点放置在边上层

\n

上一步结果中节点在边的下层不符合常规，是由于 groupByTypes 为 false 时，节点和边的层级根据生成的顺序确定，而边的生成顺序在节点之后，因此所有边被绘制到了节点上方。为了使图符合常规——节点在上层，边在下层，可以在 graph.render() 之后将所有的节点通过 toFront() 函数提前。

\n

\n

函数描述

\n
// 将节点实例 nodeItem 提前到其父级 group 的最前面\nnodeItem.toFront();\n// 将节点实例 nodeItem 放置到其父级 group 的最后面\nnodeItem.toBack();\n// 将边实例 edgeItem 提前到其父级 group 的最前面\nedgeItem.toFront();\n// 将边实例 edgeItem 放置到其父级 group 的最后面\nedgeItem.toBack();\n
\n

\n

书用方法

\n
// const graph = ...\ngraph.data(data);\ngraph.render();\n// 获取图上的所有边实例\nconst nodes = graph.getNodes();\n// 遍历边实例，将所有边提前。\nnodes.forEach(node => {\n  node.toFront();\n});\n// 更改层级后需要重新绘制图\ngraph.paint();\n
\n

 
这样，所有节点被绘制在边上层：
\"image.png\"

\n

\n

Step 3 监听鼠标事件并改变目标元素层级

\n

在效果图中，鼠标进入节点时，相关边和节点的层级被提升到最上层，鼠标离开节点使恢复。边同理。这一步将实现这一交互效果。

\n

\n

函数描述

\n

使用下面四个函数监听鼠标的进入、离开元素的事件：

\n
// 鼠标进入节点事件\ngraph.on('node:mouseenter', ev => {\n  // ...\n});\n\n// 鼠标离开节点事件\ngraph.on('node:mouseleave', ev => {\n  // ...\n});\n\n// 鼠标进入边事件\ngraph.on('edge:mouseenter', ev => {\n  // ...\n});\n\n// 鼠标离开边事件\ngraph.on('edge:mouseleave', ev => {\n  // ...\n});\n
\n

\n

使用方法

\n
// 鼠标进入节点事件\ngraph.on('edge:mouseenter', ev => {\n  // 获得鼠标当前目标边\n  const edge = ev.item;\n  // 该边的起始点\n  const source = edge.getSource();\n  // 该边的结束点\n  const target = edge.getTarget();\n  // 先将边提前，再将端点提前。这样该边两个端点还是在该边上层，较符合常规。\n  edge.toFront();\n  source.toFront();\n  target.toFront();\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('edge:mouseleave', ev => {\n  // 获得图上所有边实例\n  const edges = graph.getEdges();\n  // 遍历边，将所有边的层级放置在后方，以恢复原样\n  edges.forEach(edge => {\n    edge.toBack();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('node:mouseenter', ev => {\n  // 获得鼠标当前目标节点\n  const node = ev.item;\n  // 获取该节点的所有相关边\n  const edges = node.getEdges();\n  // 遍历相关边，将所有相关边提前，再将相关边的两个端点提前，以保证相关边的端点在边的上方常规效果\n  edges.forEach(edge => {\n    edge.toFront();\n    edge.getSource().toFront();\n    edge.getTarget().toFront();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n\ngraph.on('node:mouseleave', ev => {\n  // 获得图上所有边实例\n  const edges = graph.getEdges();\n  // 遍历边，将所有边的层级放置在后方，以恢复原样\n  edges.forEach(edge => {\n    edge.toBack();\n  });\n  // 注意：必须调用以根据新的层级顺序重绘\n  graph.paint();\n});\n
"}