聚类轮廓包裹

阅读时间约 2 分钟

createHull(cfg: HullCfg)

参数

名称类型是否必选描述
cfgHullCfgtrue轮廓配置项

轮廓包裹的形状支持 round-convex / smooth-convex / bubble 三种类型,默认为 round-convex 类型。round-convex 为圆角凸包轮廓,smooth-convex 为平滑曲线凸包轮廓,这两种凸包轮廓不可绕开配置项中的 nonMembers;bubble 为自由凹包轮廓,可以绕开 nonMembers。配置项( HullCfg)支持的配置参数详情如下:

名称类型是否必选描述
idstringtrue包裹的 id
typeround-convex / smooth-convex / bubblefalse包裹的类型:round-convex 生成圆角凸包轮廓,smooth-convex 生成平滑凸包轮廓 / bubble 产生一种可以避开 nonMembers 的平滑凹包轮廓(算法)。 默认值是 round-convex
membersItem[] / string[]true在包裹内部的节点实例或节点 Id 数组
nonMembersItem[] / string[]false不在轮廓内部的节点数组,只在 bubble 类型的包裹中生效
paddingnumberfalse轮廓边缘和内部成员的间距
styleobjectfalse轮廓的样式属性,属性包括 fill (填充颜色), stroke (描边颜色), opacity (透明度)

用法

let centerNodes = graph.getNodes().filter((node) => !node.getModel().isLeaf);
graph.on('afterlayout', () => {
  const hull1 = graph.createHull({
    id: 'centerNode-hull',
    type: 'bubble',
    members: centerNodes,
    padding: 10,
  });

  const hull2 = graph.createHull({
    id: 'leafNode-hull1',
    members: ['node6', 'node7'],
    padding: 10,
    style: {
      fill: 'lightgreen',
      stroke: 'green',
    },
  });

  const hull3 = graph.createHull({
    id: 'leafNode-hull2',
    members: ['node8', 'node9', 'node10', 'node11', 'node12'],
    padding: 10,
    style: {
      fill: 'lightgreen',
      stroke: 'green',
    },
  });

  graph.on('afterupdateitem', (e) => {
    hull1.updateData(hull1.members);
    hull2.updateData(hull2.members);
    hull3.updateData(hull3.members);
  });
});

getHulls()

获取图上所有的包裹轮廓。

返回值

  • 返回值类型:Object;对象中的 key 是字符串类型,代表 hull 的 ID ,对象中的 value 是对应的 hull 实例。
  • 返回值表示当前 graph 中所有轮廓 ID 到 轮廓实例的映射。

用法

const hullMap = graph.getHulls();

removeHull(hull: string | Hull)

移除指定 id 或指定实例的轮廓。

参数

名称类型是否必选描述
hullstring / Hulltrue轮廓 id 或轮廓实例

用法

graph.removeHull('myHull');

removeHulls()

移除当前图上所有轮廓实例。

参数

无参数。

用法

graph.removeHulls();