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

Feature 自 G6 3.1.2 开始支持自定义节点分组的标题了，可以渲染带有标题的分组。

\n
\n

对于熟悉图可视化类库的用户来说，节点分组可能是比较实用的一个功能。自 G6 3.0.5 版本开始，G6 加入了节点分组的功能，详情参考Demo。
\"group2.gif\"

\n

数据结构

\n

新增节点分组功能时，尽量保持了 G6 数据结构的稳定性。为了体现分组的特性，我们在 nodes 数据项中加入了 groupId 属性，另外新增了 groups 字段，用于表示数据中所包括的分组及各分组之间的层级关系。

\n

当 groups 中的对象包括 title 属性字段时，表示要渲染带有标题的分组，title 字段的类型可以是 string 或 object：

\n\n
{\n  nodes: [\n    {\n      id: 'node1',\n      label: 'node1',\n      groupId: 'group1',\n      x: 100,\n      y: 100\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n      groupId: 'group1',\n      x: 150,\n      y: 100\n    },\n    {\n      id: 'node3',\n      label: 'node3',\n      groupId: 'group2',\n      x: 300,\n      y: 100\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2'\n    }\n  ],\n  groups: [\n    {\n      id: 'group1',\n      title: {\n      \ttext: '第一个分组',\n        stroke: '#444',\n        offsetX: 0,\n        offsetY: 0\n      },\n      parentId: 'p1'\n    },\n    {\n      id: 'group2',\n      parentId: 'p1'\n    },\n    {\n      id: 'p1'\n    }\n  ]\n}
\n

如何渲染 group

\n

当 nodes 中存在 groupId 属性字段时，在渲染过程中，G6 就会自动去渲染分组，当存在 groups 属性时，G6 就会自定去判断各分组之间的层级关系，并渲染出嵌套的分组。但当没有使用任何布局的时候，需要在 nodes 中指定各个阶段的坐标信息，即阶段的 x 和 y 属性值。

\n
const data = {\n  nodes: [\n    {\n      id: 'node6',\n      groupId: 'group3',\n      label: 'rect',\n      x: 100,\n      y: 300,\n    },\n    {\n      id: 'node1',\n      label: 'fck',\n      groupId: 'group1',\n      x: 100,\n      y: 100,\n    },\n    {\n      id: 'node9',\n      label: 'noGroup1',\n      groupId: 'p1',\n      x: 300,\n      y: 210,\n    },\n    {\n      id: 'node2',\n      label: 'node2',\n      groupId: 'group1',\n      x: 150,\n      y: 200,\n    },\n    {\n      id: 'node3',\n      label: 'node3',\n      groupId: 'group2',\n      x: 300,\n      y: 100,\n    },\n    {\n      id: 'node7',\n      groupId: 'p1',\n      label: 'node7-p1',\n      x: 200,\n      y: 200,\n    },\n    {\n      id: 'node10',\n      label: 'noGroup',\n      groupId: 'p2',\n      x: 300,\n      y: 210,\n    },\n  ],\n  edges: [\n    {\n      source: 'node1',\n      target: 'node2',\n    },\n    {\n      source: 'node2',\n      target: 'node3',\n    },\n  ],\n  groups: [\n    {\n      id: 'group1',\n      title: {\n        text: '第一个分组',\n        stroke: '#444',\n        offsetX: -30,\n        offsetY: 30,\n      },\n      parentId: 'p1',\n    },\n    {\n      id: 'group2',\n      parentId: 'p1',\n    },\n    {\n      id: 'group3',\n      parentId: 'p2',\n    },\n    {\n      id: 'p1',\n    },\n    {\n      id: 'p2',\n    },\n  ],\n};\n\nconst graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  pixelRatio: 2,\n  modes: {\n    default: ['drag-canvas'],\n  },\n  defaultNode: {\n    shape: 'circleNode',\n  },\n  defaultEdge: {\n    color: '#bae7ff',\n  },\n});\n\ngraph.data(data);\ngraph.render();\n
\n

渲染的效果如下图所示：
\"image.png\"
此时，不能对分组中的节点及分组进行任何操作，接下来，我们介绍可以对分组进行的各种操作。

\n

操作分组

\n

只是简单地将分组渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现分组的价值。

\n

在 G6 中，我们内置了 drag-group、collapse-expand-group 及  drag-node-with-group  三个Behavior，共支持以下的交互行为：

\n\n

drag-group

\n

drag-group Behavior，支持拖动分组，拖动分组过程中，会动态改变分组中节点和边的位置，在拖拽完成以后，保持分组和节点的相对位置不变。

\n

collapse-expand-group

\n

collapse-expand-group Behavior，支持双击分组收起和展开分组，收起分组以后，隐藏分组中的所有节点，外部节点和分组中节点有连线的情况下，所有连接会连接到分组上面。

\n

优化目前只支持双击交互，正式发布时，会支持用户自定义交互方式，来实现分组的收起和展开。

\n

drag-node-with-group

\n

drag-node-with-group Behavior 和 drag-node 类似，但该 Behavior 仅用于用 group 时 node 的拖拽。拖拽 node 过程中，会动态改变 node 所在的分组。

\n

优化目前暂不支持将多个节点拖出拖入到分组中。

\n
const graph = new G6.Graph({\n  container: 'mountNode',\n  width: 800,\n  height: 600,\n  pixelRatio: 2,\n  modes: {\n    default: ['drag-group', 'collapse-expand-group', 'drag- node-with-group'],\n  },\n  defaultNode: {\n    shape: 'circleNode',\n  },\n  defaultEdge: {\n    color: '#bae7ff',\n  },\n});\n
\n

将这三个内置提供的 Behavior 加入到 modes 中以后的效果如下图所示。

\n

\"group2.gif\"

\n

适用的场景

\n
    \n
  1. 风控、反洗钱、保险骗保、网络诈骗、信用卡诈骗等场景下团伙分析；
    2. \n
  2. 特征分析：同一个分组中的节点在某些特征上面比较相似；
    3. \n
  3. 整理节点：当类似的节点放到一个分组中，只渲染分组，不渲染节点，减少干扰元素。
    4. \n
"}