Network - nodes

Handles the creation and deletion of nodes and contains the global node options and styles.

Options

The options for the nodes have to be contained in an object titled 'nodes'. All of these options can be supplied per node as well. Obviously, 'id' should not be defined globally but per node. Options defined in the global nodes object, are applied to all nodes. If a node has options of its own, those will be used instead of the global options.

When you have given a node an option, you will override the global option for that property, and also the group option for that property if the node is in a group. If you then set that option to null, it will revert back to the default value.

Click on the full options or shorthand options to show how these options are supposed to be used.


These options can also be set per individual node. All of the individual options are explained here:

Name Type Default Description
borderWidth Number 1 The width of the border of the node.
borderWidthSelected Number 2 The width of the border of the node when it is selected. When undefined, the borderWidth * 2 is used.
brokenImage String undefined When the shape is set to image or circularImage, this option can be an URL to a backup image in case the URL supplied in the image option cannot be resolved.
chosen Object or Boolean true When true, selecting or hovering on a node will change it and its label's characteristics according to the default. When false, no change to the node or its label will occur when the node is chosen. If an object is supplied, finer-grained adjustment of node and label characteristics is available when a node is chosen.
color Object or String Object The color object contains the color information of the node in every situation. When the node only needs a single color, a color value like 'rgba(120,32,14,1)', '#ffffff' or 'red' can be supplied instead of an object.
ctxRenderer Function undefined

The function inputs and outputs look like:

function ctxRenderer({ ctx, id, x, y, state: { selected, hover }, style, label }) {
  // do some math here
  return {
    // bellow arrows
    // primarily meant for nodes and the labels inside of their boundaries
    drawNode() {
      ctx.drawSomeNode();
    },
    // above arrows
    // primarily meant for labels outside of the node
    drawExternalLabel() {
      ctx.drawSomeTextOutsideOfTheNode();
    },
    // node dimensions defined by node drawing
    nodeDimensions: { width, height },
  };
}
                

This function allows to draw any canvas shapes and lines (see guide to how to draw shapes here). This property is used only when the property shape is 'custom'.

example:
function({ ctx, x, y, state: { selected, hover }, style }) {
    const r = style.size;
    ctx.beginPath();
    const sides = 6;
    const a = (Math.PI * 2) / sides;
    ctx.moveTo(x , y + r);
    for (let i = 1; i < sides; i++) {
        ctx.lineTo(x + r * Math.sin(a * i), y + r * Math.cos(a * i));
    }
    ctx.closePath();
    ctx.save();
    ctx.fillStyle = 'red';
    ctx.fill(); 
    ctx.stroke();
    ctx.restore();

    ctx.font = "normal 12px sans-serif";
    ctx.fillStyle = 'black';
}
                
opacity Number undefined Overall opacity of a node (overrides any opacity on border, background, image, and shadow)
fixed Object or Boolean Object When true, the node will not move but IS part of the physics simulation. When defined as an object, movement in either X or Y direction can be disabled.
font Object or String false This object defines the details of the label. A shorthand is also supported in the form 'size face color' for example: '14px arial red'.
group String undefined When not undefined, the node will belong to the defined group. Styling information of that group will apply to this node. Node specific styling overrides group styling.
heightConstraint Number, Boolean or Object false If false, no heightConstraint is applied. If a number is specified, the value is used as the minimum height of the node. The node's height will be set to the minimum if less than the value.
hidden Boolean false When true, the node will not be shown. It will still be part of the physics simulation though!
icon Object Object These options are only used when the shape is set to icon.
id Number or String undefined The id of the node. The id is mandatory for nodes and they have to be unique. This should obviously be set per node, not globally.
image Object or String undefined When the shape is set to image or circularImage, this option should be the URL to an image. If the image cannot be found, the brokenImage option can be used.
Note: Firefox has a SVG drawing bug, there is a workaround - add width/height attributes to root <svg> element of the SVG.
imagePadding Object or Number 0 If a number is specified, the paddings of the image inside the shape are set to that value on all sides. These options are only used when the shape is set to image, circularImage.
label String undefined The label is the piece of text shown in or under the node, depending on the shape.
labelHighlightBold Boolean true Determines whether or not the label becomes bold when the node is selected.
level Number undefined When using the hierarchical layout, the level determines where the node is going to be positioned.
margin Object or Number 5 If a number is specified, the margins of the label are set to that value on all sides. These options are only used when the shape is set to box, circle, database, icon or text.
mass Number 1 The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By increasing the mass of a node, you increase it's repulsion.

Values between 0 and 1 are not recommended.
Negative or zero values are not allowed. These will generate a console error and will be set to 1.
physics Boolean true When false, the node is not part of the physics simulation. It will not move except for from manual dragging.
scaling Object Object If the value option is specified, the size of the nodes will be scaled according to the properties in this object. All node shapes can be scaled, but some only when label scaling is enabled as their size is based on the size of the label. Only scalable when label scaling is enabled are: ellipse, circle, database, box, text. Always scalable are: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square and icon. Keep in mind that when using scaling, the size option is neglected.
shadow Object or Boolean Object When true, the node casts a shadow using the default settings. This can be further refined by supplying an object.
shape String 'ellipse'

The shape defines what the node looks like. There are three types of nodes. One type has the label inside of it and the other type has the label underneath it. The third type is a custom shape you can draw whatever you want to represent the node.

The types with the label inside of it are: ellipse, circle, database, box, text.

The ones with the label outside of it are: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square and icon.

If none of these shapes suffice, you can use the custom shape which will allow you to create your own shape rendered via ctxRenderer option.

shapeProperties Object Object This object contains configuration for specific shapes.
size Number 25 The size is used to determine the size of node shapes that do not have the label inside of them. These shapes are: image, circularImage, diamond, dot, star, triangle, triangleDown, hexagon, square and icon
title String or Element undefined Title to be displayed in a pop-up when the user hovers over the node. The title can be an HTML element or a string containing plain text. See HTML in titles example if you want to parse HTML.
value Number undefined When a value is set, the nodes will be scaled using the options in the scaling object defined above.
widthConstraint Number, Boolean or Object false If false, no widthConstraint is applied. If a number is specified, the minimum and maximum widths of the node are set to the value. The node's label's lines will be broken on spaces to stay below the maximum and the node's width will be set to the minimum if less than the value.
x Number undefined This gives a node its initial position on the x axis. When using hierarchical layout, this value has no effect. When using stabilization, the stabilized position may be different from the initial one (the node will start at this position but may move to different location based on the stabilization configuration). To lock the node to this position, turn off physics or set fixed.x node option to true.
y Number undefined This gives a node its initial position on the y axis. When using hierarchical layout, this value has no effect. When using stabilization, the stabilized position may be different from the initial one (the node will start at this position but may move to different location based on the stabilization configuration). To lock the node to this position, turn off physics or set fixed.y node option to true.

Third party docs: