From 360768f6438f83c49955a181436d2c99609d65f0 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Thu, 16 Apr 2015 17:48:02 +0200 Subject: [PATCH] improved (circular) images size handling and label positions --- docs/css/newdocs.css | 80 +++++++++++++++ docs/network/canvas.html | 121 +++++++++++++++++++++++ docs/network/configure.html | 104 ++++++++++++++++++++ docs/network/interaction.html | 163 ++++++++++++++++++++++++++++++ docs/network/layout.html | 126 ++++++++++++++++++++++++ docs/network/new_network.html | 121 +++++++++++++++++++++++ docs/network/nodes.html | 180 ++++++++++++++++++++++++++++++++++ docs/network/rendering.html | 111 +++++++++++++++++++++ docs/network/selection.html | 127 ++++++++++++++++++++++++ docs/network/view.html | 169 +++++++++++++++++++++++++++++++ index.html | 2 +- 11 files changed, 1303 insertions(+), 1 deletion(-) create mode 100644 docs/css/newdocs.css create mode 100644 docs/network/canvas.html create mode 100644 docs/network/configure.html create mode 100644 docs/network/interaction.html create mode 100644 docs/network/layout.html create mode 100644 docs/network/new_network.html create mode 100644 docs/network/nodes.html create mode 100644 docs/network/rendering.html create mode 100644 docs/network/selection.html create mode 100644 docs/network/view.html diff --git a/docs/css/newdocs.css b/docs/css/newdocs.css new file mode 100644 index 00000000..79727508 --- /dev/null +++ b/docs/css/newdocs.css @@ -0,0 +1,80 @@ + +html { + height:100%; +} +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; + /*font-family: Lustria, Georgia, Times, "Times New Roman", serif !important;*/ + height:100%; + font-size:16px; + background: url('../../images/crosswordStrong.png') /* Background pattern from subtlepatterns.com */ +} + +img.icon { + position:relative; + top:-2px; +} + + +div.navbar-wrapper { + background-color:#07508E; + border-bottom: 3px solid #ffffff; + font-size:16px; +} + +div.blogHeader { + margin-left:auto; + margin-right:auto; + text-align:center; + width:910px; + padding: 0px 30px 0px 30px; + margin-top:-150px; + color:#ffffff; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); + margin-bottom:60px; + +} + +div.full { + min-height:100%; + box-shadow:0px 2px 10px rgba(0,0,0,0.4); + padding-left:20px; + padding-right:20px; + background-color:#ffffff; +} + +table.moduleTable { + border:1px solid #eeeeee; + font-size:14px; + margin-left:20px; + max-width: 900px; +} + +table.moduleTable td{ + min-width: 80px; + padding:2px 5px 2px 5px; + height:35px; +} + +table.moduleTable tr{ + border:1px solid #eeeeee; + vertical-align: top; + +} + +tr.header { + color: #1f3350; + background-color: #cccccc; + border-bottom:1px solid #999999 !important; + font-size:16px; + font-style:italic; +} + +td.mid { + background-color: #f7f7f7; + font-style:italic; +} + +td.properties { + width:150px; +} \ No newline at end of file diff --git a/docs/network/canvas.html b/docs/network/canvas.html new file mode 100644 index 00000000..f4b30ad2 --- /dev/null +++ b/docs/network/canvas.html @@ -0,0 +1,121 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - canvas

+

Handles the HTML part of the canvas.

+ +

Options

+

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

+ + + + +
nametypedefaultdescription
widthString'100%'the width of the canvas. Can be in percentages or pixels (ie. '400px').
heightString'100%'the height of the canvas. Can be in percentages or pixels (ie. '400px').
+ +

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.

+ + + + + +
namereturnsdescription
setSize(String, String)noneSet the size of the canvas. This is automatically done on a window resize.
canvasToDOM(Object) ObjectThis 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(Object) ObjectThis 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.

+ + + + + +
namepropertiesdescription
resize
    +
  • width: the new width of the canvas
    • +
  • height: the new height of the canvas
    • +
  • oldWidth: the old width of the canvas
    • +
  • oldHeight: 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.
+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/docs/network/configure.html b/docs/network/configure.html new file mode 100644 index 00000000..4b61793d --- /dev/null +++ b/docs/network/configure.html @@ -0,0 +1,104 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - configure

+

Handles the HTML part of the canvas.

+ +

Options

+

Alternative to supplying an object, you can supply a String, Array or Boolean. These will do the same as the filter option described below.

+ + + + +
nametypedefaultdescription
filter String | Array | Boolean trueWhen a boolean, true gives you all options, false will not show any. If a string is supplied, any combination of the following is allowed: nodes, edges, layout, interaction, manipulation, physics, selection, renderer. Feel free to come up with a fun seperating character. Finally, when supplied an array of strings, any of the previously mentioned fields are accepted.
container DOM element undefinedThis allows you to put the configure list in another HTML container than below the network.
+ +

Methods

+

The configure module has no methods.

+ +

Events

+

The configure module has no Events.

+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/docs/network/interaction.html b/docs/network/interaction.html new file mode 100644 index 00000000..563c54db --- /dev/null +++ b/docs/network/interaction.html @@ -0,0 +1,163 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - interaction

+

Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.

+ +

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
dragNodes Boolean true When true, the nodes that are not fixed can be dragged by the user.
dragView Boolean true When true, the view can be dragged around by the user.
zoomView Boolean true When true, the user can zoom in.
hoverEnabled Boolean false When true, the nodes use their hover colors when the mouse moves over them.
navigationButtons Boolean false When true, navigation buttons are drawn on the network canvas. These are HTML buttons and can be completely customized using CSS.
tooltipDelay Object Object When nodes or edges have a defined 'title' field, this can be shown as a pop-up tooltip. The tooltip itself is an HTML element that can be fully styled using CSS. The delay is the amount of time in milliseconds it takes before the tooltip is shown.
keyboard Object | Boolean Object When true, the keyboard shortcuts are enabled with the default settings. For further customization, you can supply an object.
keyboard.enabled Boolean false Toggle the usage of the keyboard shortcuts. If this option is not defined, it is set to true if any of the properties in this object are defined.
keyboard.speed.x Number 1 The speed at which the view moves in the x direction on pressing a key or pressing a navigation button.
keyboard.speed.y Number 1 The speed at which the view moves in the y direction on pressing a key or pressing a navigation button.
keyboard.speed.zoom Number 0.02 The speed at which the view zooms in or out pressing a key or pressing a navigation button.
keyboard.bindToWindow Boolean true When binding the keyboard shortcuts to the window, they will work regardless of which DOM object has the focus. If you have multiple networks on your page, you could set this to false, making sure the keyboard shortcuts only work on the network that has the focus.
+ +

Methods

+

The interaction module has no methods.

+ +

Events

+

These events are fired by the interaction module. They are related to user input.

+ + + + + + + + + + + + + + +
namepropertiesdescription
click +
+{
+  nodes: [Array of selected nodeIds],
+  edges: [Array of selected edgeIds],
+  pointer: {
+    DOM: {x:pointer_x, y:pointer_y},
+    canvas: {x:canvas_x, y:canvas_y}
+  }
+}
+
+ 		Fired when the user clicks the mouse or taps on a touchscreen device.
doubleClick same as click.Fired when the user double clicks the mouse or double taps on a touchscreen device. Since a double click is in fact 2 clicks, 2 click events are fired, followed by a double click event. If you do not want to use the click events if a double click event is fired, just check the time between click events before processing them.
hold same as click.Fired when the user clicks and holds the mouse or taps and holds on a touchscreen device. A click event is also fired in this case.
release same as click.Fired after drawing on the canvas has been completed. Can be used to draw on top of the network.
select same as click.Fired when the selection has changed by user action. This means a node or edge has been selected, added to the selection or deselected. All select events are only triggerd on click and hold.
selectNode same as click.Fired when a node has been selected by the user.
selectEdge same as click.Fired when a edge has been selected by the user.
deselectNode
+{
+  nodes: [Array of selected nodeIds],
+  edges: [Array of selected edgeIds],
+  pointer: {
+    DOM: {x:pointer_x, y:pointer_y},
+    canvas: {x:canvas_x, y:canvas_y}
+    }
+  },
+  previousSelection: {
+    nodes: [Array of previously selected nodeIds],
+    edges: [Array of previously selected edgeIds]
+  }
+}
+
Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event.
deselectEdgesame as deselectNode.Fired when a edge (or edges) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event.
dragStart same as click.Fired when starting a drag.
dragEnd same as click.Fired when the drag has finished.
zoom {direction:'+'/'-'}Fired when the user zooms in or out. The properties tell you which direction the zoom is in.
+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/docs/network/layout.html b/docs/network/layout.html new file mode 100644 index 00000000..9eaacc14 --- /dev/null +++ b/docs/network/layout.html @@ -0,0 +1,126 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - layout

+

Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.

+ +

Options

+

When enabling the hierarchical layout, it overrules some of the other options. The physics is set to the hierarchical repulsion solver and dynamic smooth edges are converted to static smooth edges.

+ + + + + + + + +
nametypedefaultdescription
randomSeedNumberundefined When NOT using the hierarchical layout, the nodes are randomly positioned initially. This means that the settled result is different every time. If you provide a random seed manually, the layout will be the same every time. Ideally you try with an undefined seed, reload until you are happy with the layout and use the getSeed() method to ascertain the seed.
hierarchicalObject | BooleanObject When true, the layout engine positions the nodes in a hierarchical fashion using default settings. For customization you can supply an object.
hierarchical.enabledBooleanfalse Toggle the usage of the hierarchical layout system. If this option is not defined, it is set to true if any of the properties in this object are defined.
hierarchical.levelSeparationNumber150 The distance between the different levels.
hierarchical.directionString'UD' The direction of the hierarchical layout. The available options are: UD, DU, LR, RL. To simplify: up-down, down-up, left-right, right-left.
hierarchical.sortMethodString'hubsize' The algorithm used to ascertain the levels of the nodes based on the data. The possible options are: hubsize, directed.

+ Hubsize takes the nodes with the most edges and puts them at the top. From that the rest of the hierarchy is evaluated.

+ Directed adheres to the to and from data of the edges. A --> B so B is a level lower than A.
+ +

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.

+ + + +
namereturnsdescription
getSeed() NumberIf you like the layout of your network and would like it to start in the same way next time, ask for the seed using this method and put it in the randomSeed option.
+ +

Events

+

There are no events emitted by the layout module.

+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/docs/network/new_network.html b/docs/network/new_network.html new file mode 100644 index 00000000..3a6838b0 --- /dev/null +++ b/docs/network/new_network.html @@ -0,0 +1,121 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network

+

As of 4.0, the network consists of individual modules which handle specific parts of the network. These modules have their own docs, options, methods and events which you can access + by clicking on the modules in the list below.

+ +

Modules

+ + + + + + + + + + + + + + + +
canvas Handles the HTML part of the network.
configure Generates an interactive option editor with filtering.
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.
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.
interaction Used for all user interaction with the network. Handles mouse and touch events as well as the navigation buttons and the popups.
selection Handles the selection of nodes and edges.
clustering Provides the clustering api, giving users full control over the formed clusters.
manipulation Supplies an API and optional GUI to alter the data in the network.
+ +

All Methods

+

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

+ +

All Events

+

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

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

Network - nodes

+

Handles the creation and deletion of nodes and contains the global node 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
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.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.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.
color.hover.border String '#2B7CE9' The color of the border of the node when the mouse hovers over it (assuming hover is enabled in the interaction module).
color.hover.background String '#D2E5FF' The color of the background of the node when the mouse hovers over it (assuming hover is enabled in the interaction module).
fixed Object | BooleanObject 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.
fixed.x Boolean false When true, the node will not move in the X direction.
fixed.y Boolean false When true, the node will not move in the Y direction.
font Object | Stringfalse 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 undefined When 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.
group String undefined When not undefined, the
hidden Boolean false When true, the node will not be shown. It will still be part of the physics simulation though!
icon.face String 'FontAwesome'These options are only used when the shape is set to icon. The possible options for the face are: 'FontAwesome' and 'Ionicons'.
icon.code String undefined This is the code of the icon, for example '\uf007'.
icon.size Number 50 The size of the icon.
icon.color String '#2B7CE9' The color of the icon.
image 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.
label String undefined The label is the piece of text shown in or under the node, depending on the shape.
level Number undefined When using the hierarchical layout, the level determines where the node is going to be positioned.
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 lower than 1 are not recommended.
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, square and icon. Keep in mind that when using scaling, the size options 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.
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 nodes when zoomed out and only show the rest when zooming in.
scaling.customScalingFunction Function in description If nodes 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 = maxSize - minSize;
+mySize = minSize + diff * scale;
+
+
shadow Object | Boolean ObjectWhen true, the node 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.
shape String 'ellipse' The shape defines what the node looks like. There are two types of nodes. One type has the label inside of it and the other type has the label underneath it. 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, square and icon.
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, square and icon
title String | Element undefined Title to be displayed when the user hovers over the node. The title can be an HTML element or a string containing plain text or HTML.
value Number undefined When a value is set, the nodes will be scaled using the options in the scaling object defined above.
x Number undefined This gives a node an initial x position. When using the hierarchical layout, either the x or y position is set by the layout engine depending on the type of view. The other value remains untouched. When using stabilization, the stabilized position may be different from the initial one. To lock the node to that position use the physics or fixed options.
y Number undefined This gives a node an initial y position. When using the hierarchical layout, either the x or y position is set by the layout engine depending on the type of view. The other value remains untouched. When using stabilization, the stabilized position may be different from the initial one. To lock the node to that position use the physics or fixed options.
+ +

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/rendering.html b/docs/network/rendering.html new file mode 100644 index 00000000..0ceb4ece --- /dev/null +++ b/docs/network/rendering.html @@ -0,0 +1,111 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - 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.

+ +

Options

+

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

+ + + + +
nametypedefaultdescription
hideEdgesOnDragBooleanfalseWhen true, the edges are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
hideNodesOnDragBooleanfalseWhen true, the nodes are not drawn when dragging the view. This can greatly speed up responsiveness on dragging, improving user experience.
+ +

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.

+ + + +
namereturnsdescription
redraw()noneRedraw the network.
+ +

Events

+

These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.

+ + + + + +
namepropertiesdescription
initRedrawnoneFired before the redrawing begins. The simulation step has completed at this point. Can be used to move custom elements before starting drawing the new frame.
beforeDrawingcanvas contextFired after the canvas has been cleared, scaled and translated to the viewing position but before all edges and nodes are drawn. Can be used to draw behind the network.
initRedrawcanvas contextFired after drawing on the canvas has been completed. Can be used to draw on top of the network.
+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/docs/network/selection.html b/docs/network/selection.html new file mode 100644 index 00000000..59578190 --- /dev/null +++ b/docs/network/selection.html @@ -0,0 +1,127 @@ + + + + + + + + + vis.js - A dynamic, browser based visualization library. + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + +
+

Network - selection

+

Handles the selection of nodes and edges.

+ +

Options

+

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

+ + + + +
nametypedefaultdescription
select BooleantrueWhen true, the nodes and edges can be selected by the user.
selectConnectedEdges BooleantrueWhen true, on selecting a node, its connecting edges are highlighted.
+ +

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.

+ + + + + + + + + +
namereturnsdescription
getSelection() +
+{
+  nodes: [Array of selected nodeIds],
+  edges: [Array of selected edgeIds]
+}
Returns an object with selected nodes and edges ids.
getSelectedNodes() [nodeId1, nodeId2, ..]Returns an array of selected node ids.
getSelectedEdges() [edgeId1, edgeId2, ..]Returns an array of selected edge ids.
selectNodes(
   Array with nodeIds,
   [Boolean highlightEdges]
)		 noneSelects the nodes corresponding to the id's in the input array. If highlightEdges is true or undefined, the neighbouring edges will also be selected. This method unselects all other objects before selecting its own objects. Does not fire events.
selectEdges(
   Array with edgeIds
)		 noneSelects the edges corresponding to the id's in the input array. This method unselects all other objects before selecting its own objects. Does not fire events.
unselectAll() none Unselect all objects. Does not fire events.
+ +

Events

+

The selection handler does not fire events. All related events are fired by the interaction module because they are triggered by user interaction.

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

Network - view

+

Acts as the camera that looks on the canvas. Does the animation, zooming and focusing.

+ +

Options

+

The view has no options.

+ + +

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.

+ + + + + + + + + + + + +
namereturnsdescription
getScale() NumberReturns the current scale of the network. 1.0 is comparible to 100%, 0 is zoomed out infinitely.
getPosition() NumberReturns the current central focus point of the camera.
moveTo(Object options) noneYou can animate or move the camera using the moveTo method. Options are: +
+{
+  position: {x:Number, y:Number},
+  scale: Number,
+  offset: {x:Number, y:Number}
+  animation: { // -------------------> can be a boolean too!
+    duration: Number
+    easingFunction: String
+  }
+}
+
+ The position (in canvas units!) is the position of the central focus point of the camera.

+ The scale is the target zoomlevel. Default value is 1.0.

+ The offset (in DOM units) is how many pixels from the center the view is focussed. Default value is {x:0,y:0}.

+ For animation you can either use a Boolean to use it with the default options or disable it or you can define the duration (in milliseconds) and easing function manually. Available are: + linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint.

+ You will have to define at least a scale or a position. Otherwise, there is nothing to move to. +
zoomExtent([Object options])noneZooms out so all nodes fit on the canvas. You can supply options to customize this: +
+{
+  nodes:[Array of nodeIds],
+  duration: Number,
+  easingFunction: String
+}
+
+ The nodes can be used to zoom to fit only specific nodes in the view.

+ The other options are explained in the moveTo() description above. + All options are optional for zoomExtent. +
focusOnNode(
+    String nodeId,
+    [Object options]
)		noneYou can focus on a node with this function. What that means is the view will lock onto that node, if it is moving, the view will also move accordingly. If the view is dragged by the user, the focus is broken. + You can supply options to customize the effect: +
+{
+  scale: Number,
+  offset: {x:Number, y:Number}
+  locked: boolean
+  animation: { // -------------------> can be a boolean too!
+    duration: Number
+    easingFunction: String
+  }
+}
+
+ All options except for locked are explained in the moveTo() description above. Locked denotes whether or not the view remains locked to the node once the zoom-in animation is finished. Default value is true. The options object is optional in focusOnNode.
releaseNode()noneProgramatically release the focussed node.
+ +

Events

+

These events are fired by the renderer and can be used to move and draw custom elements on the same canvas as the rest of the network.

+ + + +
namepropertiesdescription
animationFinishednoneFired when an animation is finished.
+ +
+
+
+
+
+
+
+
+ + + + + + + + diff --git a/index.html b/index.html index 0412afed..2c3f521b 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@