g6/docs/api/graph/hull.en.md
2020-11-13 22:33:15 +08:00

2.8 KiB
Raw Blame History

title order
Hull for Clusters 11

createHull(cfg: HullCfg)

Parameter

Name Type Required Description
cfg HullCfg true Configuration for the hull.

Details for HullCfg:

Name Type Required Description
id string true Hull id
type round-convex / smooth-convex / bubble false Configuration for hull type: round-convex generates a rounded-convex contour, smooth-convex generates a smooth-convex contour / bubble generates a smooth concave contour that could avoids nonMembers (algorithm. The default value is round-convex.
members Item[] / string[] true Node Instances or Node Ids that should be included in the hull.
nonMembers Item[] / string[] false Node Instances or Node Ids that should be excluded from the hull, it only works when the hull type is set to be bubble.
padding number false The offset between the hull polygon and the inner members.
style object false The style properties for hull, including fill ( the fill color), stroke ( the stroke color) and opacity (transparency of the hull shape).

Usage

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()

Get all of the hulls in the current graph.

Return

  • Type of return value: {[key: string]: Hull;
  • The return object indicates the mapping of hull ID to the corresponding hull instance. Each key of the object is a string representing the ID of hull, and the value of the object is the corresponding hull instance.

Usage

const hullMap = graph.getHulls();

removeHull

Parameter

Name Type Required Description
hull string Hull true hull id or hull instance to be removed

Usage

graph.removeHull('myHull');