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.

• options hidden
• full options
• shorthand options

// these are all options in full.
var options = {
  nodes:{
    borderWidth: 1,
    borderWidthSelected: 2,
    brokenImage:undefined,
    chosen: true,
    color: {
      border: '#2B7CE9',
      background: '#97C2FC',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      },
      hover: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    },
    opacity: 1,
    fixed: {
      x:false,
      y:false
    },
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 0, // px
      strokeColor: '#ffffff',
      align: 'center',
      multi: false,
      vadjust: 0,
      bold: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold'
      },
      ital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'italic',
      },
      boldital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold italic'
      },
      mono: {
        color: '#343434',
        size: 15, // px
        face: 'courier new',
        vadjust: 2,
        mod: ''
      }
    },
    group: undefined,
    heightConstraint: false,
    hidden: false,
    icon: {
      face: 'FontAwesome',
      code: undefined,
      weight: undefined,
      size: 50,  //50,
      color:'#2B7CE9'
    },
    image: undefined,
    imagePadding: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    label: undefined,
    labelHighlightBold: true,
    level: undefined,
    mass: 1,
    physics: true,
    scaling: {
      min: 10,
      max: 30,
      label: {
        enabled: false,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          let scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    shape: 'ellipse',
    shapeProperties: {
      borderDashes: false, // only for borders
      borderRadius: 6,     // only for box shape
      interpolation: false,  // only for image and circularImage shapes
      useImageSize: false,  // only for image and circularImage shapes
      useBorderWithImage: false,  // only for image shape
      coordinateOrigin: 'center'  // only for image and circularImage shapes
    }
    size: 25,
    title: undefined,
    value: undefined,
    widthConstraint: false,
    x: undefined,
    y: undefined
  }
}

network.setOptions(options);

// only the options that have shorthand notations are shown.
var options = {
  nodes:{
    color: '#ff0000',
    fixed: false,
    font: '12px arial red',
    scaling: {
      label: true
    },
    shadow: true
  }
}
network.setOptions(options);

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

  function(values, id, selected, hovering) {
    values.property = chosenValue;
  }

  function(values, id, selected, hovering) {
    values.property = chosenValue;
  }

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 },
  };
}
                

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';
}
                

function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  }
  else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
  }
}

var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
mySize = minSize + diff * scale;