Network - canvas

Handles the HTML part of the canvas.

Options

The options for the canvas have to be contained in an object titled 'canvas'.

Click on the options shown to show how these options are supposed to be used.


All of the individual options are explained here:

name type default description
width String '100%' the width of the canvas. Can be in percentages or pixels (ie. '400px').
height String '100%' the height of the canvas. Can be in percentages or pixels (ie. '400px').
autoResize Boolean true If true, the Network will automatically detect when its container is resized, and redraw itself accordingly. If false, the Network can be forced to repaint after its container has been resized using the function redraw() and setSize().

Methods

This is a list of all the methods in the public API. Options can be set directly to the module or you can use the setOptions method of the network itself and use the module name as an object name.

name returns description
setSize(
   String width,
   String height
) 		none Set the size of the canvas. This is automatically done on a window resize.
canvasToDOM({
   x: Number,
   y: Number
}) 		Object This function converts canvas coordinates to coordinates on the DOM. Input and output are in the form of {x:Number,y:Number}. The DOM values are relative to the network container.
DOMtoCanvas({
   x: Number,
   y: Number
}) 		Object This function converts DOM coordinates to coordinates on the canvas. Input and output are in the form of {x:Number,y:Number}. The DOM values are relative to the network container.

Events

This is a list of all the events in the public API. They are collected here from all individual modules.

name properties description
resize 
{
  width: Number     // the new width  of the canvas
  height: Number    // the new height of the canvas
  oldWidth: Number  // the old width  of the canvas
  oldHeight: Number // the old height of the canvas
}
Fired when the size of the canvas has been resized, either by a redraw call when the container div has changed in size, a setSize() call with new values or a setOptions() with new width and/or height values.