jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

fixed hierarchical layout toggle issue.

flowchartTest
Alex de Mulder 9 years ago
parent
5f486ee56b
commit
e9fc1a0303
5 changed files with 146 additions and 92 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +8
    -0
      HISTORY.md
  2. +7
    -2
      dist/vis.js
  3. +1
    -1
      lib/network/modules/LayoutEngine.js
  4. +5
    -2
      lib/network/modules/NodesHandler.js
  5. +125
    -87
      test/networkTest.html

+ 8
- 0
HISTORY.md View File

@ -1,6 +1,14 @@
# vis.js history # vis.js history
http://visjs.org http://visjs.org
## YET TO BE RELEASED, version 4.5.1
### Network
- Fixed another clustering bug, phantom edges should be gone now.
- Fixed disabling hierarchical layout.
## 2015-07-17, version 4.5.0 ## 2015-07-17, version 4.5.0
### General ### General

+ 7
- 2
dist/vis.js View File

@ -27428,6 +27428,8 @@ return /******/ (function(modules) { // webpackBootstrap
}, { }, {
key: 'refresh', key: 'refresh',
value: function refresh() { value: function refresh() {
var clearPositions = arguments[0] === undefined ? false : arguments[0];
var nodes = this.body.nodes; var nodes = this.body.nodes;
for (var nodeId in nodes) { for (var nodeId in nodes) {
var node = undefined; var node = undefined;
@ -27436,7 +27438,10 @@ return /******/ (function(modules) { // webpackBootstrap
} }
var data = this.body.data.nodes._data[nodeId]; var data = this.body.data.nodes._data[nodeId];
if (node !== undefined && data !== undefined) { if (node !== undefined && data !== undefined) {
node.setOptions({ fixed: false, x: null, y: null });
if (clearPositions === true) {
node.setOptions({ x: null, y: null });
}
node.setOptions({ fixed: false });
node.setOptions(data); node.setOptions(data);
} }
} }
@ -37983,7 +37988,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.options.hierarchical.enabled === true) { if (this.options.hierarchical.enabled === true) {
if (prevHierarchicalState === true) { if (prevHierarchicalState === true) {
// refresh the overridden options for nodes and edges. // refresh the overridden options for nodes and edges.
this.body.emitter.emit('refresh');
this.body.emitter.emit('refresh', true);
} }
// make sure the level seperation is the right way up // make sure the level seperation is the right way up

+ 1
- 1
lib/network/modules/LayoutEngine.js View File

@ -48,7 +48,7 @@ class LayoutEngine {
if (this.options.hierarchical.enabled === true) { if (this.options.hierarchical.enabled === true) {
if (prevHierarchicalState === true) { if (prevHierarchicalState === true) {
// refresh the overridden options for nodes and edges. // refresh the overridden options for nodes and edges.
this.body.emitter.emit('refresh');
this.body.emitter.emit('refresh', true);
} }
// make sure the level seperation is the right way up // make sure the level seperation is the right way up

+ 5
- 2
lib/network/modules/NodesHandler.js View File

@ -290,7 +290,7 @@ class NodesHandler {
} }
refresh() {
refresh(clearPositions = false) {
let nodes = this.body.nodes; let nodes = this.body.nodes;
for (let nodeId in nodes) { for (let nodeId in nodes) {
let node = undefined; let node = undefined;
@ -299,7 +299,10 @@ class NodesHandler {
} }
let data = this.body.data.nodes._data[nodeId]; let data = this.body.data.nodes._data[nodeId];
if (node !== undefined && data !== undefined) { if (node !== undefined && data !== undefined) {
node.setOptions({ fixed: false, x:null, y:null });
if (clearPositions === true) {
node.setOptions({x:null, y:null});
}
node.setOptions({ fixed: false });
node.setOptions(data); node.setOptions(data);
} }
} }

+ 125
- 87
test/networkTest.html View File

@ -1,110 +1,148 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<title>Network | Clustering</title>
<script type="text/javascript" src="../dist/vis.js"></script>
<title>Network | Hierarchical layout</title>
<style type="text/css"> <style type="text/css">
body {
font: 10pt sans;
}
#mynetwork { #mynetwork {
width: 600px; width: 600px;
height: 600px; height: 600px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
p {
max-width: 600px;
}
h4 {
margin-bottom: 3px;
}
</style> </style>
</head>
<body>
<script type="text/javascript" src="../dist/vis.js"></script>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 4, label: '4'},
{id: 5, label: '5'},
{id: 7, label: '7'},
{id: 9, label: '9'},
{id: 10, label: '10'},
{id: 101, label: '101'},
{id: 102, label: '102'},
{id: 103, label: '103'}
];
// create an array with edges
var edges = [
{from: 10, to: 4},
{from: 7, to: 5},
{from: 9, to: 7},
{from: 10, to: 9},
{from: 101, to: 102},
{from: 102, to: 103}
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {layout: {randomSeed: 8}};
var network = new vis.Network(container, data, options);
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
// if we click on a node, we want to open it up!
network.on("selectNode", function (params) {
if (params.nodes.length == 1) {
if (network.isCluster(params.nodes[0]) == true) {
network.openCluster(params.nodes[0])
function destroy() {
if (network !== null) {
network.destroy();
network = null;
} }
} }
});
setTimeout(function() {
// alert("clustering 4 and 101")
var clusterOptionsByData = {
joinCondition: function(node) {
if (node.id == 4 || node.id == 101)
return true;
return false;
},
clusterNodeProperties: {id:"c1", label:'c1'}
function draw() {
destroy();
// randomly create some nodes and edges
var nodeCount = document.getElementById('nodeCount').value;
//var data = getScaleFreeNetwork(nodeCount)
var nodes = [
{id: 4, label: '4'},
{id: 5, label: '5'},
{id: 7, label: '7'},
{id: 9, label: '9'},
{id: 10, label: '10'},
{id: 101, label: '101'},
{id: 102, label: '102'},
{id: 103, label: '103'}
];
// create an array with edges
var edges = [
{from: 10, to: 4},
{from: 7, to: 5},
{from: 9, to: 7},
{from: 10, to: 9},
{from: 101, to: 102},
{from: 102, to: 103}
];
var data = {
nodes: nodes,
edges: edges
};
// create a network
var container = document.getElementById('mynetwork');
var directionInput = document.getElementById("direction").value;
var options = {
interaction: {
navigationButtons: true
},
layout: {
hierarchical: {
direction: directionInput
}
}
};
network = new vis.Network(container, data, options);
// add event listeners
network.on('select', function (params) {
document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
});
} }
network.cluster(clusterOptionsByData);
network.stabilize()
},500)
setTimeout(function() {
// alert("clustering c1 and 5")
var clusterOptionsByData2 = {
joinCondition: function(node) {
if (node.id == 'c1' || node.id == 5)
return true;
return false;
},
clusterNodeProperties: {id:"c2", label:'c2'}
function changeOptions(directionInputValue) {
network.setOptions({
layout: {
hierarchical: {
direction: directionInputValue
}
}
});
} }
network.cluster(clusterOptionsByData2);
},2000)
/*
setTimeout(function () {
alert("opening c2")
network.openCluster("c2")
},3000)
*/
</script>
</head>
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>
<br/>
<form onsubmit="draw(); return false;">
<label for="nodeCount">Number of nodes:</label>
<input id="nodeCount" type="text" value="25" style="width: 50px;">
<input type="submit" value="Go">
</form>
<p>
<input type="button" id="btn-UD" value="Up-Down">
<input type="button" id="btn-DU" value="Down-Up">
<input type="button" id="btn-LR" value="Left-Right">
<input type="button" id="btn-RL" value="Right-Left">
<input type="hidden" id='direction' value="UD">
</p>
<script language="javascript">
var directionInput = document.getElementById("direction");
var btnUD = document.getElementById("btn-UD");
btnUD.onclick = function () {
directionInput.value = "UD";
changeOptions(directionInput.value);
}
var btnDU = document.getElementById("btn-DU");
btnDU.onclick = function () {
directionInput.value = "DU";
changeOptions(directionInput.value);
};
var btnLR = document.getElementById("btn-LR");
btnLR.onclick = function () {
directionInput.value = "LR";
changeOptions(directionInput.value);
};
var btnRL = document.getElementById("btn-RL");
btnRL.onclick = function () {
directionInput.value = "RL";
changeOptions(directionInput.value);
};
</script> </script>
<br>
<div id="mynetwork"></div>
<p id="selection"></p>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save