Network - edges

Handles the creation and deletion of edges and contains the global edge options and styles.

Options

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

When you have given an edge an option, you will override the global option for that property. If you then set that option to undefined or 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 = {
  edges:{
    arrows: {
      to:     {enabled: false, scaleFactor:1},
      middle: {enabled: false, scaleFactor:1},
      from:   {enabled: false, scaleFactor:1}
    },
    color: {
      color:'#848484',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
    },
    dashes: false,
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 2, // px
      strokeColor: '#ffffff',
      align:'horizontal'
    },
    hidden: false,
    hoverWidth: 1.5,
    label: undefined,
    length: undefined,
    physics: true,
    scaling:{
      min: 1,
      max: 15,
      label: {
        enabled: true,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 3
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          var scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    selectionWidth: 1,
    selfReferenceSize:20,
    shadow:{
      enabled: false,
      size:10,
      x:5,
      y:5
    },
    smooth: {
      enabled: true,
      type: "dynamic",
      roundness: 0.5
    },
    title:undefined,
    width: 1,
    value: undefined
  }
}

network.setOptions(options);

// here all options that have shorthand notations are shown.
var options = {
  edges:{
    arrows: 'to, from',
    color: 'red',
    font: '12px arial #ff0000',
    scaling:{
      label: true,
    },
    shadow: true,
    smooth: true,
  }
}

network.setOptions(options);

These options can also be set per individual edge.

var options: {
  edges: {
    hoverWidth: function (width) {return width+1;}
  }
}

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 = maxWidth - minWidth;
myWidth = minWidth + diff * scale;

var options: {
  edges: {
    selectionWidth: function (width) {return width*2;}
  }
}