Browse Source

added documentation

v3_develop
Alex de Mulder 9 years ago
parent
commit
3814ff18c4
6 changed files with 94 additions and 52 deletions
  1. +3
    -2
      HISTORY.md
  2. +10
    -10
      dist/vis.js
  3. +60
    -2
      docs/network.html
  4. +11
    -28
      examples/network/29_neighbourhood_highlight.html
  5. +5
    -5
      lib/network/Network.js
  6. +5
    -5
      lib/network/mixins/ManipulationMixin.js

+ 3
- 2
HISTORY.md View File

@ -13,9 +13,10 @@ http://visjs.org
- Added fade in of labels (on nodes) near the fontDrawThreshold. - Added fade in of labels (on nodes) near the fontDrawThreshold.
- Added nodes option to zoomExtent to zoom in on specific set of nodes. - Added nodes option to zoomExtent to zoom in on specific set of nodes.
- Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized. - Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized.
- Added setFreezeSimulation method.
- Added clusterByZoom option and increaseClusterLevel and decreaseClusterLevel methods.
- Added freezeSimulation method.
- Added clusterByZoom option.
- Fixed bug when redrawing was not right on zoomed-out browsers. - Fixed bug when redrawing was not right on zoomed-out browsers.
- Added opacity to edges. Opacity is only used for the unselected state.
### DataSet/DataView ### DataSet/DataView

+ 10
- 10
dist/vis.js View File

@ -23037,7 +23037,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.setOptions(options); this.setOptions(options);
// other vars // other vars
this.freezeSimulation = false;// freeze the simulation
this.freezeSimulationEnabled = false;// freeze the simulation
this.cachedFunctions = {}; this.cachedFunctions = {};
this.startedStabilization = false; this.startedStabilization = false;
this.stabilized = false; this.stabilized = false;
@ -25055,7 +25055,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @private * @private
*/ */
Network.prototype._physicsTick = function() { Network.prototype._physicsTick = function() {
if (!this.freezeSimulation) {
if (!this.freezeSimulationEnabled) {
if (this.moving == true) { if (this.moving == true) {
var mainMovingStatus = false; var mainMovingStatus = false;
var supportMovingStatus = false; var supportMovingStatus = false;
@ -25195,13 +25195,13 @@ return /******/ (function(modules) { // webpackBootstrap
/** /**
* Freeze the _animationStep * Freeze the _animationStep
*/ */
Network.prototype.setFreezeSimulation = function(freeze) {
Network.prototype.freezeSimulation = function(freeze) {
if (freeze == true) { if (freeze == true) {
this.freezeSimulation = true;
this.freezeSimulationEnabled = true;
this.moving = false; this.moving = false;
} }
else { else {
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
this.moving = true; this.moving = true;
this.start(); this.start();
} }
@ -33378,7 +33378,7 @@ return /******/ (function(modules) { // webpackBootstrap
delete this.sectors['support']['nodes']['targetNode']; delete this.sectors['support']['nodes']['targetNode'];
delete this.sectors['support']['nodes']['targetViaNode']; delete this.sectors['support']['nodes']['targetViaNode'];
this.controlNodesActive = false; this.controlNodesActive = false;
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
}; };
/** /**
@ -33447,7 +33447,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._restoreOverloadedFunctions(); this._restoreOverloadedFunctions();
// resume calculation // resume calculation
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
// reset global variables // reset global variables
this.blockConnectingEdgeSelection = false; this.blockConnectingEdgeSelection = false;
@ -33617,7 +33617,7 @@ return /******/ (function(modules) { // webpackBootstrap
// clear the toolbar // clear the toolbar
this._clearManipulatorBar(); this._clearManipulatorBar();
this._unselectAll(true); this._unselectAll(true);
this.freezeSimulation = true;
this.freezeSimulationEnabled = true;
if (this.boundFunction) { if (this.boundFunction) {
this.off('select', this.boundFunction); this.off('select', this.boundFunction);
@ -33748,7 +33748,7 @@ return /******/ (function(modules) { // webpackBootstrap
this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y)); this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
if (this.selectedControlNode !== null) { if (this.selectedControlNode !== null) {
this.selectedControlNode.select(); this.selectedControlNode.select();
this.freezeSimulation = true;
this.freezeSimulationEnabled = true;
} }
this._redraw(); this._redraw();
}; };
@ -33792,7 +33792,7 @@ return /******/ (function(modules) { // webpackBootstrap
else { else {
this.edgeBeingEdited._restoreControlNodes(); this.edgeBeingEdited._restoreControlNodes();
} }
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
this._redraw(); this._redraw();
}; };

+ 60
- 2
docs/network.html View File

@ -959,6 +959,38 @@ mySize = minSize + diff * scale;
<td>14</td> <td>14</td>
<td>Font size in pixels for label in the node.</td> <td>Font size in pixels for label in the node.</td>
</tr> </tr>
<tr>
<td>scaleFontWithValue</td>
<td>Boolean</td>
<td>false</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the this option.</td>
</tr>
<tr>
<td>fontSizeMin</td>
<td>Number</td>
<td>14</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the minimum value of the fontSize.</td>
</tr>
<tr>
<td></td>fontSizeMax</td>
<td>Number</td>
<td>30</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the maximum value of the fontSize.</td>
</tr>
<tr>
<td>fontSizeMaxVisible</td>
<td>Number</td>
<td>30</td>
<td>When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. If you have a wide distribution of values and have a large max fontSize,
the text will become huge if you zoom in on it. This option limits the percieved fontSize to avoid this. If you set it to 20, no label will be larger than fontsize 20 (at scale = 1) regardless of the scale.</td>
</tr>
<tr>
<td>fontDrawThreshold</td>
<td>Number</td>
<td>3</td>
<td>When zooming out, the text becomes smaller. This option sets the minimum size of the label before not being drawn. Just like the fontSizeMaxVisible option, this is the relative fontSize (fontSize * scale).
You can combine this with the min and max values to have the labels of influential nodes show earlier when zooming in.</td>
</tr>
<tr> <tr>
<td class="greenField">fontFill</td> <td class="greenField">fontFill</td>
<td>String</td> <td>String</td>
@ -1229,7 +1261,12 @@ var options = {
<td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge. <td>Possible values: <code>"line-above", "line-center", "line-below"</code>. The alignment of the label when drawn on the edge.
If <code>horizontal</code> it will align the label absolute horizontial.</td> If <code>horizontal</code> it will align the label absolute horizontial.</td>
</tr> </tr>
<tr>
<td class="greenField">opacity</td>
<td>Number</td>
<td>1.0</td>
<td>Possible values: <code>[0 .. 1]</code>. This opacity value is added on top of the color information. This only happens for the unselected state.</td>
</tr>
<tr> <tr>
<td class="greenField">style</td> <td class="greenField">style</td>
<td>string</td> <td>string</td>
@ -1759,7 +1796,8 @@ var options = {
radius: 1}, radius: 1},
maxNodeSizeIncrements: 600, maxNodeSizeIncrements: 600,
activeAreaBoxSize: 100, activeAreaBoxSize: 100,
clusterLevelDifference: 2
clusterLevelDifference: 2,
clusterByZoom: true
} }
} }
// OR to just load the module with default values: // OR to just load the module with default values:
@ -1902,6 +1940,12 @@ var options = {
If the highest level of your network at any given time is 3, nodes that have not clustered or If the highest level of your network at any given time is 3, nodes that have not clustered or
have clustered only once will join their neighbour with the lowest cluster level.</td> have clustered only once will join their neighbour with the lowest cluster level.</td>
</tr> </tr>
<tr>
<td>clusterByZoom</td>
<td>Boolean</td>
<td>true</td>
<td>You can toggle the clustering by zoom level using this option.</td>
</tr>
</table> </table>
<h3 id="Navigation_controls">Navigation controls</h3> <h3 id="Navigation_controls">Navigation controls</h3>
@ -2246,6 +2290,13 @@ var options = {
<td>Returns a bounding box for the node including label in the format: {top:Number,left:Number,right:Number,bottom:Number}. These values are in canvas space. <td>Returns a bounding box for the node including label in the format: {top:Number,left:Number,right:Number,bottom:Number}. These values are in canvas space.
</td> </td>
</tr> </tr>
<tr>
<td>getConnectedNodes(nodeId)</td>
<td>Array</td>
<td>Returns an array with nodeIds of nodes that are connected to this node. Network keeps track of the connected nodes so this function allows you
to quickly get them without iterating over all edges manually. This is a lot faster for cases with many edges.
</td>
</tr>
<tr> <tr>
<td>getSelection()</td> <td>getSelection()</td>
<td>Array of ids</td> <td>Array of ids</td>
@ -2272,6 +2323,13 @@ var options = {
easeInQuint, easeOutQuint, easeInOutQuint </code> <br /><br /> easeInQuint, easeOutQuint, easeInOutQuint </code> <br /><br />
</td> </td>
</tr> </tr>
<tr>
<td>freezeSimulation(Boolean)</td>
<td>none</td>
<td>Calling freezeSimulation(true) immmediately stops the simulation and triggerst the stabilized event. This does not mean that the network
is physically stabilized but the nodes are not moving anymore. To continue the simulation call freezeSimulation(false).
</td>
</tr>
<tr> <tr>
<td>releaseNode()</td> <td>releaseNode()</td>
<td>none</td> <td>none</td>

+ 11
- 28
examples/network/29_neighbourhood_highlight.html View File

@ -10027,7 +10027,12 @@ function redrawAll() {
radiusMin: 10, radiusMin: 10,
radiusMax: 30, radiusMax: 30,
fontSize: 12, fontSize: 12,
fontFace: "Tahoma"
fontFace: "Tahoma",
scaleFontWithValue:true,
fontSizeMin:8,
fontSizeMax:20,
fontThreshold:12,
fontSizeMaxVisible:20
}, },
edges: { edges: {
width: 0.15, width: 0.15,
@ -10047,7 +10052,7 @@ function redrawAll() {
}; };
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
// network.on("click",onClick);
network.on("click",onClick);
} }
@ -10071,8 +10076,6 @@ function onClick(selectedItems) {
} }
} }
else { else {
var allEdges = edges.get();
// we clear the level of separation in all nodes. // we clear the level of separation in all nodes.
clearLevelOfSeperation(allNodes); clearLevelOfSeperation(allNodes);
@ -10083,7 +10086,7 @@ function onClick(selectedItems) {
// any data can be added to a node, this is just stored in the nodeObject. // any data can be added to a node, this is just stored in the nodeObject.
storeLevelOfSeperation(connectedNodes,0, allNodes); storeLevelOfSeperation(connectedNodes,0, allNodes);
for (var i = 1; i < degrees + 1; i++) { for (var i = 1; i < degrees + 1; i++) {
appendConnectedNodes(connectedNodes, allEdges);
appendConnectedNodes(connectedNodes);
storeLevelOfSeperation(connectedNodes, i, allNodes); storeLevelOfSeperation(connectedNodes, i, allNodes);
} }
for (nodeId in allNodes) { for (nodeId in allNodes) {
@ -10153,7 +10156,7 @@ function clearLevelOfSeperation(allNodes) {
* *
* *
*/ */
function appendConnectedNodes(sourceNodes, allEdges) {
function appendConnectedNodes(sourceNodes) {
var tempSourceNodes = []; var tempSourceNodes = [];
// first we make a copy of the nodes so we do not extend the array we loop over. // first we make a copy of the nodes so we do not extend the array we loop over.
for (var i = 0; i < sourceNodes.length; i++) { for (var i = 0; i < sourceNodes.length; i++) {
@ -10165,7 +10168,8 @@ function appendConnectedNodes(sourceNodes, allEdges) {
if (sourceNodes.indexOf(nodeId) == -1) { if (sourceNodes.indexOf(nodeId) == -1) {
sourceNodes.push(nodeId); sourceNodes.push(nodeId);
} }
addUnique(getConnectedNodes(nodeId, allEdges),sourceNodes);
var connectedNodes = network.getConnectedNodes(nodeId);
addUnique(connectedNodes,sourceNodes);
} }
tempSourceNodes = null; tempSourceNodes = null;
} }
@ -10183,27 +10187,6 @@ function addUnique(fromArray, toArray) {
} }
} }
/**
* Get a list of nodes that are connected to the supplied nodeId with edges.
* @param nodeId
* @returns {Array}
*/
function getConnectedNodes(nodeId, allEdges) {
var edgesArray = allEdges;
var connectedNodes = [];
for (var i = 0; i < edgesArray.length; i++) {
var edge = edgesArray[i];
if (edge.to == nodeId) {
connectedNodes.push(edge.from);
}
else if (edge.from == nodeId) {
connectedNodes.push(edge.to)
}
}
return connectedNodes;
}
redrawAll() redrawAll()
</script> </script>

+ 5
- 5
lib/network/Network.js View File

@ -292,7 +292,7 @@ function Network (container, data, options) {
this.setOptions(options); this.setOptions(options);
// other vars // other vars
this.freezeSimulation = false;// freeze the simulation
this.freezeSimulationEnabled = false;// freeze the simulation
this.cachedFunctions = {}; this.cachedFunctions = {};
this.startedStabilization = false; this.startedStabilization = false;
this.stabilized = false; this.stabilized = false;
@ -2310,7 +2310,7 @@ Network.prototype._revertPhysicsTick = function() {
* @private * @private
*/ */
Network.prototype._physicsTick = function() { Network.prototype._physicsTick = function() {
if (!this.freezeSimulation) {
if (!this.freezeSimulationEnabled) {
if (this.moving == true) { if (this.moving == true) {
var mainMovingStatus = false; var mainMovingStatus = false;
var supportMovingStatus = false; var supportMovingStatus = false;
@ -2450,13 +2450,13 @@ Network.prototype._handleNavigation = function() {
/** /**
* Freeze the _animationStep * Freeze the _animationStep
*/ */
Network.prototype.setFreezeSimulation = function(freeze) {
Network.prototype.freezeSimulation = function(freeze) {
if (freeze == true) { if (freeze == true) {
this.freezeSimulation = true;
this.freezeSimulationEnabled = true;
this.moving = false; this.moving = false;
} }
else { else {
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
this.moving = true; this.moving = true;
this.start(); this.start();
} }

+ 5
- 5
lib/network/mixins/ManipulationMixin.js View File

@ -15,7 +15,7 @@ exports._clearManipulatorBar = function() {
delete this.sectors['support']['nodes']['targetNode']; delete this.sectors['support']['nodes']['targetNode'];
delete this.sectors['support']['nodes']['targetViaNode']; delete this.sectors['support']['nodes']['targetViaNode'];
this.controlNodesActive = false; this.controlNodesActive = false;
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
}; };
/** /**
@ -84,7 +84,7 @@ exports._createManipulatorBar = function() {
this._restoreOverloadedFunctions(); this._restoreOverloadedFunctions();
// resume calculation // resume calculation
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
// reset global variables // reset global variables
this.blockConnectingEdgeSelection = false; this.blockConnectingEdgeSelection = false;
@ -254,7 +254,7 @@ exports._createAddEdgeToolbar = function() {
// clear the toolbar // clear the toolbar
this._clearManipulatorBar(); this._clearManipulatorBar();
this._unselectAll(true); this._unselectAll(true);
this.freezeSimulation = true;
this.freezeSimulationEnabled = true;
if (this.boundFunction) { if (this.boundFunction) {
this.off('select', this.boundFunction); this.off('select', this.boundFunction);
@ -385,7 +385,7 @@ exports._selectControlNode = function(pointer) {
this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y)); this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
if (this.selectedControlNode !== null) { if (this.selectedControlNode !== null) {
this.selectedControlNode.select(); this.selectedControlNode.select();
this.freezeSimulation = true;
this.freezeSimulationEnabled = true;
} }
this._redraw(); this._redraw();
}; };
@ -429,7 +429,7 @@ exports._releaseControlNode = function(pointer) {
else { else {
this.edgeBeingEdited._restoreControlNodes(); this.edgeBeingEdited._restoreControlNodes();
} }
this.freezeSimulation = false;
this.freezeSimulationEnabled = false;
this._redraw(); this._redraw();
}; };

Loading…
Cancel
Save