diff --git a/docs/network/edges.html b/docs/network/edges.html new file mode 100644 index 00000000..8a821003 --- /dev/null +++ b/docs/network/edges.html @@ -0,0 +1,178 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - edges

+

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

+ +

Options

+

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
name type default description
arrows Object | String 1 To draw an arrow with default settings a string can be supplied. For example: arrows:'to, from, middle' or 'to;from', any combination with any seperating symbol is fine. If you want to control the size of the arrowheads, you can supply an object.
arrows.to Object | Boolean Object When true, an arrowhead on the 'to' side of the edge is drawn, pointing to the 'to' node with default settings. To customize the size of the arrow, supply an object.
arrows.to.enabled Boolean false Toggle the arrow on or off. This option is optional, if undefined and the scaleFactor property is set, enabled will be set to true.
arrows.to.scaleFactor Number 1 The scale factor allows you to change the size of the arrowhead.
arrows.middle Object | Boolean Object Exactly the same as the to object but with an arrowhead in the center of the edge.
arrows.from Object | Boolean Object Exactly the same as the to object but with an arrowhead at the from node of the edge.
color Object | String Object The color object contains the color information of the edge in every situation. When the edge only needs a single color, a color value like 'rgb(120,32,14)', '#ffffff' or 'red' can be supplied instead of an object.
color.color String '#848484'The color of the border of the node when it is not selected or hovered over (assuming hover is enabled in the interaction module).
color.highlight String '#848484'The color the edge when it is selected.
color.hover String '#848484'The color the edge when the mouse hovers over it (assuming hover is enabled in the interaction module).
color.inherit String | Boolean 'from' When color, highlight or hover are defined, inherit is set to false! +

Supported options are: true, false, 'from','to','both'. +

The default value is 'from' which does the same as true: the edge will inherit the color from the border of the node on the 'from' side. +

When set to 'to', the border color from the 'to' node will be used. +

When set to 'both', the color will fade from the from color to the to color. 'both' is computationally intensive because the gradient is recomputed every redraw. This is required because the angles change when the nodes move.
color.opacity Number 1.0 It can be useful to set the opacity of an edge without manually changing all the colors. The opacity option will convert all colors (also when using inherit) to adhere to the supplied opacity. The allowed range of the opacity option is between 0 and 1. This is only done once so the performance impact is not too big.
dashes Object | Boolean Object When true, the edge will be drawn as a dashed line. You can customize the dashes by supplying an object. When using dashed lines in IE versions older than 11, the line will be drawn straight, not smooth.
dashes.enabled Boolean false Toggle the dash drawing style on or off. This option is optional, if undefined and the scaleFactor property is set, enabled will be set to true.
dashes.pattern Array [5,5] Array of numbers repeating gap length, dash length, gap length, dash length, ... etc. The array is repeated until the distance is filled.
font Object | 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'.
font.color String '#343434'Color of the label text.
font.size Number 14 Size of the label text.
font.face String 'arial' Font face (or font family) of the label text.
font.background String undefinedWhen not undefined but a color string, a background rectangle will be drawn behind the label in the supplied color.
font.stroke Number 0 As an alternative to the background rectangle, a stroke can be drawn around the text. When a value higher than 0 is supplied, the stroke will be drawn.
font.strokeColor String '#ffffff'This is the color of the stroke assuming the value for stroke is higher than 0.
font.align String 'horizontal'Possible options: 'horizontal','top','middle','bottom'. The alignment determines how the label is aligned over the edge. The default value horizontal aligns the label horizontally, regardless of the orientation of the edge. When an option other than horizontal is chosen, the label will align itself according to the edge.
hidden Boolean false When true, the edge is not drawn. It is part still part of the physics simulation however!
hoverWidth Number 1.5 The width of the edge when the mouse hovers over it (and hover is enabled in the interaction module!)
label String undefinedThe label of the edge. HTML does not work in here because the network uses HTML5 Canvas.
length Number undefinedThe physics simulation gives edges a spring length. This value can override the length of the spring in rest.
physics Boolean true When true, the edge is part of the physics simulation. When false, it will not act as a spring.
scaling Object Object If the value option is specified, the width of the edges will be scaled according to the properties in this object. Keep in mind that when using scaling, the width option is neglected.
scaling.min Number 1 If edges have a value, their widths are determined by the value, the scaling function and the min max values. The min value is the minimum allowed value.
scaling.max Number 15 This is the maximum allowed width when the edges are scaled using the value option.
scaling.label Object | BooleanObject When false, the label is not allowed to scale with the edge. If true it will scale using default settigns. For further customization, you can supply an object.
scaling.label.enabled Boolean false Toggle the scaling of the label on or off. If this option is not defined, it is set to true if any of the properties in this object are defined.
scaling.label.min Number 14 The minimum font-size used for labels when scaling.
scaling.label.max Number 30 The maximum font-size used for labels when scaling.
scaling.label.maxVisibleNumber 30 When zooming in, the font is drawn larger as well. You can limit the perceived font size using this option. If set to 30, the font will never look larger than size 30 zoomed at 100%.
scaling.label.drawThresholdNumber 3 When zooming out, the font will be drawn smaller. This defines a lower limit for when the font is drawn. When using font scaling, you can use this together with the maxVisible to first show labels of important edges when zoomed out and only show the rest when zooming in.
scaling.customScalingFunction Functionin description If edges have value fields, this function determines how the size of the nodes are scaled based on their values. The default function is: +
+function (min,max,total,value) {
+  if (max === min) {
+    return 0.5;
+  }
+  else {
+    var scale = 1 / (max - min);
+    return Math.max(0,(value - min)*scale);
+  }
+}
+
+ The function receives the minimum value of the set, the maximum value, the total sum of all values and finally the value of the node or edge it works on. It has to return a value between 0 and 1. The nodes and edges then calculate their size as follows: +
+var scale = customScalingFunction(min,max,total,value);
+var diff = maxWidth - minWidth;
+myWidth = minWidth + diff * scale;
+
+
selfReferenceSize Number false When the to and from nodes are the same, a circle is drawn. This is the radius of that circle.
shadow Object | Boolean ObjectWhen true, the edge casts a shadow using the default settings. This can be further refined by supplying an object.
shadow.enabled Boolean false Toggle the casting of shadows. If this option is not defined, it is set to true if any of the properties in this object are defined.
shadow.size Number 10 The blur size of the shadow.
shadow.x Number 5 The x offset.
shadow.y Number 5 The y offset.
smooth Object | Boolean ObjectWhen true, the edge is drawn as a quadratic bezier curve. The drawing of these curves takes longer than that of straight curves but it looks better. + There is a difference between dynamic smooth curves and static smooth curves. The dynamic smooth curves have an invisible support node that takes part in the physics simulation. If you have a lot of edges, you may want to consider turning off dynamic smooth curves for performance.
smooth.enabled Boolean true Toggle smooth curves on and off. This is an optional option. If any of the other properties in this object are set, this option will be set to true.
smooth.dynamic Boolean false When true, the edges will have an invisible support node guiding the shape. This node is part of the physics simulation. When false, there are a number of different approximations for smooth curves. Those can be selected in the type property.
smooth.type String 'continuous' Possible options: 'continuous', 'discrete', 'diagonalCross', 'straightCross', 'horizontal', 'vertical', 'curvedCW', 'curvedCCW'. Take a look at our example 26 to see what these look like and pick the one that you like best! These do not do anything for dynamic smooth curves.
smooth.roundness Number 0.5 Accepted range: 0 .. 1.0. This parameter tweaks the roundness of the static smooth curves.
title String undefined The title is shown in a pop-up when the mouse moves over the edge.
width Number 1 The width of the edge. If value is set, this is not used.
widthSelectionMultiplierNumber 2 When you select the edge, the width will be the normal width * widthSelectionMultiplier.
value Number undefined When a value is set, the edges' width will be scaled using the options in the scaling object defined above.
+ +

Methods

+

The nodes module has no methods.

+ +

Events

+

The nodes module emits no events. Click and select events are emitted from the interaction and selection modules.

+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/docs/network/new_network.html b/docs/network/new_network.html index 3a6838b0..c4c58ce9 100644 --- a/docs/network/new_network.html +++ b/docs/network/new_network.html @@ -81,7 +81,7 @@ rendering Handles the rendering aspect of vis. It governs the render loop, it draws the nodes and edges and provides events to allow users to hook into the drawing. groups Contains the groups and some options on how to handle nodes with non-existing groups. nodes Handles the creation and deletion of nodes and contains the global node options and styles. - edges Handles the creation and deletion of edges and contains the global edge options and styles. + edges Handles the creation and deletion of edges and contains the global edge options and styles. layout Governs the initial and hierarchical positioning. physics Does all the simulation moving the nodes and edges to their final positions, also governs stabilization. view Acts as the camera that looks on the canvas. Does the animation, zooming and focusing. diff --git a/docs/network/nodes.html b/docs/network/nodes.html index f96ab5e5..3ff89ff4 100644 --- a/docs/network/nodes.html +++ b/docs/network/nodes.html @@ -75,10 +75,10 @@ borderWidth Number 1 The width of the border of the node. borderWidthSelected Number undefined The width of the border of the node when it is selected. When undefined, the borderWidth 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. - color Object/StringObject 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. + color Object | StringObject 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. color.border String '#2B7CE9' The color of the border of the node when it is not selected or hovered over (assuming hover is enabled in the interaction module). color.background String '#D2E5FF' The color of the background of the node when it is not selected or hovered over (assuming hover is enabled in the interaction module). - color.highlight Object/StringObject The color the node when it is selected. Alternatively you can just supply a string color value. + color.highlight Object | StringObject The color the node when it is selected. Alternatively you can just supply a string color value. color.highlight.borderString '#2B7CE9' The color of the border of the node when it is selected. color.highlight.backgroundString '#D2E5FF' The color of the background of the node when it is selected. color.hover Object/StringObject The color the node when the mouse hovers over it (assuming hover is enabled in the interaction module). Shorthand like above is also supported. @@ -111,7 +111,7 @@ ellipse, circle, database, box, text. Always scalable are: image, circularImage, diamond, dot, - star, triangle, triangleDown, square and icon. Keep in mind that when using scaling, the size options is neglected. + star, triangle, triangleDown, square and icon. Keep in mind that when using scaling, the size option is neglected. scaling.min Number 10 If nodes have a value, their sizes are determined by the value, the scaling function and the min max values. The min value is the minimum allowed value. scaling.max Number 30 This is the maximum allowed size when the nodes are scaled using the value option. scaling.label Object | BooleanObjectThis can be false if the label is not allowed to scale with the node. If true it will scale using default settigns. For further customization, you can supply an object.