Network | Animation

From b28028ac4082842143b0f528d6bc539da6ccb419 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Thu, 21 Sep 2017 12:49:18 -0400 Subject: mega changes, including updates and X --- .../examples/network/other/animationShowcase.html | 279 +++++++++++++++++++++ .../network/other/changingClusteredEdgesNodes.html | 107 ++++++++ www/lib/vis/examples/network/other/clustering.html | 141 +++++++++++ .../examples/network/other/clusteringByZoom.html | 160 ++++++++++++ .../examples/network/other/clustersOfclusters.html | 75 ++++++ .../vis/examples/network/other/configuration.html | 83 ++++++ .../vis/examples/network/other/manipulation.html | 193 ++++++++++++++ www/lib/vis/examples/network/other/navigation.html | 135 ++++++++++ .../vis/examples/network/other/performance.html | 91 +++++++ .../vis/examples/network/other/saveAndLoad.html | 177 +++++++++++++ 10 files changed, 1441 insertions(+) create mode 100644 www/lib/vis/examples/network/other/animationShowcase.html create mode 100644 www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html create mode 100644 www/lib/vis/examples/network/other/clustering.html create mode 100644 www/lib/vis/examples/network/other/clusteringByZoom.html create mode 100644 www/lib/vis/examples/network/other/clustersOfclusters.html create mode 100644 www/lib/vis/examples/network/other/configuration.html create mode 100644 www/lib/vis/examples/network/other/manipulation.html create mode 100644 www/lib/vis/examples/network/other/navigation.html create mode 100644 www/lib/vis/examples/network/other/performance.html create mode 100644 www/lib/vis/examples/network/other/saveAndLoad.html (limited to 'www/lib/vis/examples/network/other') diff --git a/www/lib/vis/examples/network/other/animationShowcase.html b/www/lib/vis/examples/network/other/animationShowcase.html new file mode 100644 index 00000000..1e0d82ae --- /dev/null +++ b/www/lib/vis/examples/network/other/animationShowcase.html @@ -0,0 +1,279 @@ + + + + Network | Animation + + + + + + + + + + + + +

Camera animations

+ You can move the view around programmatically using the .moveTo(options) function. The options supplied to this function can + also be (partially) supplied to the .fit() and .focusOnNode() methods. These are explained in the docs. +

+ The buttons below take the fields from the table when they can. For instance, the "Animate with default settings." takes the position, scale and offset while using + the default animation values for duration and easing function. The focusOnNode takes everything except the position and the fit takes only the duration and easing function. +

+ Here you can see a full description of the options you can supply to moveTo: +

+var moveToOptions = {
+    position: {x:x, y:x},    // position to animate to (Numbers)
+    scale: 1.0,              // scale to animate to  (Number)
+    offset: {x:x, y:y},      // offset from the center in DOM pixels (Numbers)
+    animation: {             // animation object, can also be Boolean
+      duration: 1000,                 // animation duration in milliseconds (Number)
+      easingFunction: "easeInOutQuad" // Animation easing function, available are:
+    }                                   // linear, easeInQuad, easeOutQuad, easeInOutQuad,
+}                                       // easeInCubic, easeOutCubic, easeInOutCubic,
+                                        // easeInQuart, easeOutQuart, easeInOutQuart,
+                                        // easeInQuint, easeOutQuint, easeInOutQuint
+

+ + + + + + + + + + + + + + + + + + + + + + +

position x
position y
scale
offset x	px
offset y	px
duration	ms
easingFunction	+ +

+
+ Examples: +
+
+
+
+
+

+ +

+ + diff --git a/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html new file mode 100644 index 00000000..145dcb72 --- /dev/null +++ b/www/lib/vis/examples/network/other/changingClusteredEdgesNodes.html @@ -0,0 +1,107 @@ + + + + Network | Clustering + + + + + + + + + + + +

+Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode.

Clicking on the cluster will change it to a star (updateClusteredNode).
Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)
Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge

+ +

+ + + + + diff --git a/www/lib/vis/examples/network/other/clustering.html b/www/lib/vis/examples/network/other/clustering.html new file mode 100644 index 00000000..bd68c42f --- /dev/null +++ b/www/lib/vis/examples/network/other/clustering.html @@ -0,0 +1,141 @@ + + + + Network | Clustering + + + + + + + + + + + +

+Click any of the buttons below to cluster the network. On every push the network will be reinitialized first. You can click on a cluster to open it. +

+ +
+
+
+
+
+ +

+ + + + + diff --git a/www/lib/vis/examples/network/other/clusteringByZoom.html b/www/lib/vis/examples/network/other/clusteringByZoom.html new file mode 100644 index 00000000..e2391f16 --- /dev/null +++ b/www/lib/vis/examples/network/other/clusteringByZoom.html @@ -0,0 +1,160 @@ + + + + Network | Clustering + + + + + + + + + + + +

+ You can zoom in and out to cluster/decluster. +

+Stabilize when clustering: +

+ + + + + diff --git a/www/lib/vis/examples/network/other/clustersOfclusters.html b/www/lib/vis/examples/network/other/clustersOfclusters.html new file mode 100644 index 00000000..0e90bcf0 --- /dev/null +++ b/www/lib/vis/examples/network/other/clustersOfclusters.html @@ -0,0 +1,75 @@ + + + + + Cluster Test + + + + + +

+ Clusters can contain other clusters, but clusters of a single node is only possible by adding +

allowSingleNodeCluster: true

+to clusterNodeProperties
+In this example repeatedly clicking on the node with open the Clusters. +

+ + + diff --git a/www/lib/vis/examples/network/other/configuration.html b/www/lib/vis/examples/network/other/configuration.html new file mode 100644 index 00000000..a13470d4 --- /dev/null +++ b/www/lib/vis/examples/network/other/configuration.html @@ -0,0 +1,83 @@ + + + + Network | Playing with Physics + + + + + + + + + + + + + + +

+ The configurator can be used to play with the options. In this example, all options that can be configured with this tool are shown. + You can also supply a custom filter function or filter string. You can press the generate options button below to have an options object printed. You can then use + this in the network. +

Note: The configurator is recreated in the dom tree on input change. This may cause undesired scrolls in your application. In order to avoid this, explicitly set the height of the configurator (see this example's source code). +

+
+

+ +

+ + diff --git a/www/lib/vis/examples/network/other/manipulation.html b/www/lib/vis/examples/network/other/manipulation.html new file mode 100644 index 00000000..b399c098 --- /dev/null +++ b/www/lib/vis/examples/network/other/manipulation.html @@ -0,0 +1,193 @@ + + + + + Network | Manipulation + + + + + + + + + + + +

Editing the nodes and edges (localized)

+ The localization is only relevant to the manipulation buttons. +

+ +

+ Select a locale: + +

+ + +
+

+ + + diff --git a/www/lib/vis/examples/network/other/navigation.html b/www/lib/vis/examples/network/other/navigation.html new file mode 100644 index 00000000..760bb539 --- /dev/null +++ b/www/lib/vis/examples/network/other/navigation.html @@ -0,0 +1,135 @@ + + + + Network | Navigation + + + + + + + + + + + + +

Navigation controls and keyboad navigation

+ This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Icons:
Keyboard shortcuts:	Up arrow	Down arrow	Left arrow	Right arrow	= [ Page up	- ] Page down	None
Description:	Move up	Move down	Move left	Move right	Zoom in	Zoom out	Zoom extent

+
+ Apart from clicking the icons, you can also navigate using the keyboard. The buttons are in table above. + Zoom Extends changes the zoom and position of the camera to encompass all visible nodes. To correctly display the navigation icons, vis.css or vis-network.min.css must be included. + The user is free to alter or overload the CSS classes but without them the navigation icons are not visible. +

+ +

+ + diff --git a/www/lib/vis/examples/network/other/performance.html b/www/lib/vis/examples/network/other/performance.html new file mode 100644 index 00000000..0b3ea663 --- /dev/null +++ b/www/lib/vis/examples/network/other/performance.html @@ -0,0 +1,91 @@ + + + + Network | Random nodes + + + + + + + + + + + +

+ Generate a random network with nodes and edges. +

+ +

+ + + diff --git a/www/lib/vis/examples/network/other/saveAndLoad.html b/www/lib/vis/examples/network/other/saveAndLoad.html new file mode 100644 index 00000000..08165c85 --- /dev/null +++ b/www/lib/vis/examples/network/other/saveAndLoad.html @@ -0,0 +1,177 @@ + + + + + + Network | Saving and loading networks + + + + + + + + + + + +

+ In this example, the network data can be exported to JSON and imported back into the network. + + Try this out by exporting the network to JSON, clearing the network and then importing it again. The nodes will all appear in the same position as they were before the network was destroyed. +

+ +

+ + + + +

+ + + + \ No newline at end of file -- cgit v1.2.3

id
label