competencegraph/js/sigma/sigma.renderers.customShapes

sigma.renderers.customShapes

Plugin developed by Ron Peleg.

---

General

This plugin registers custom node shape renderers, and allows adding scaled images on top of them. See the following example code for full usage.

To use, include all .js files under this folder.

The plugin implements the node.borderColor property to allow control of the (surprise) border color.

Shapes

The plugin implements the following shapes. To set a shape renderer, you simply set node.type='shape-name' e.g. node.type='star'. The default renderer implemented by sigma.js is named def - see also generic custom node renderer example

• circle: similar to the def renderer, but also allows images
• square
• diamond
• equilateral: equilateral polygon. you can control additional properties in this polygon by setting more values as follows: javascript node.equilateral = { rotate: /* rotate right, value in deg */, numPoints: /* default 5, integer */ }
• star: you can control additional properties in this star by setting more as follows: javascript node.star = { numPoints: /* default 5, integer */, innerRatio: /* ratio of inner radius in star, compared to node.size */ }
• cross: plus shape. you can control additional properties in this polygon by setting more values as follows: javascript node.cross = { lineWeight: /* width of cross arms */, }
• pacman: an example of a more exotic renderer

The list of available renderer types can be obtained by calling ShapeLibrary.enumerate()

Images

You can add an image to any node, simply by adding node.image property, with the following content:

node.image = {
  url: /* mandatory image URL */,
  clip: /* Ratio of image clipping disk compared to node size (def 1.0) - see example to how we adapt this to differenmt shapes */,
  scale: /* Ratio of how to scale the image, compared to node size, default 1.0 */,
  w: /* numeric width - important for correct scaling if w/h ratio is not 1.0 */,
  h: /* numeric height - important for correct scaling if w/h ratio is not 1.0 */
}

Because the plug-in calls the sigma instance refresh() method on image loading, you MUST init as follows or you will not see rendered images:

  s = new sigma({
   ...
  });
  CustomShapes.init(s);
  s.refresh();