You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
558 lines
17 KiB
558 lines
17 KiB
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<script src="../dist/vis.js"></script>
|
|
<link href="../dist/vis.css" rel="stylesheet" type="text/css" />
|
|
<style type="text/css">
|
|
.graph {
|
|
width: 100%;
|
|
height: 600px;
|
|
} </style>
|
|
</head>
|
|
<body>
|
|
|
|
VIEWPORT ISSUES WHEN REPLACING NODES
|
|
|
|
<pre>
|
|
|
|
Once the first graph is displayed
|
|
|
|
1. move the viewport (not the nodes)
|
|
2. zoom out
|
|
3. press the "fit" button (which used to be zoomExtent) - works fine!
|
|
|
|
Now
|
|
|
|
1. click the "click me" button (at the very bottom below navigation buttons)
|
|
2. the datasets will be cleared and a second graph will be displayed
|
|
3. Maybe wait a few seconds before the stabilization event is fired and the graph is fit again (actually this step is not necessary)
|
|
4. press the "click me button again to switch to the first graph
|
|
5. try to fit the graph by pressing the "fit" button (which used to be zoomExtent)
|
|
6. Neither does it correctly centerize nor is it zoomed (streched) correctly!
|
|
|
|
|
|
</pre>
|
|
|
|
<div class="graph" id="visualization1"></div>
|
|
<button onclick="javascript:action()">Click me</button>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
// @Alex @Jos THIS IS ONLY DATA - SCCCCCCCCCCCRRROOLLLLLLLLLLLL DOWN
|
|
|
|
var graph1 = {
|
|
"nodes": [
|
|
{
|
|
"color": "#c79df1",
|
|
"label": "Compose ballad",
|
|
"title": "Compose ballad",
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"group": "matches",
|
|
"id": "7BEF6C80-B285-48B3-9736-F0845E612A4F",
|
|
"x": -346,
|
|
"y": 26,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#e2e3ab",
|
|
"label": "Get the Ring",
|
|
"title": "Get the Ring",
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"group": "matches",
|
|
"id": "E255F767-A447-46D7-865C-494C782FC034",
|
|
"x": -120,
|
|
"y": -31,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#7fedb3",
|
|
"label": "Go to Mordor",
|
|
"title": "Go to Mordor",
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"group": "matches",
|
|
"id": "7E692850-2846-41ED-8E7D-F58E7F39680D",
|
|
"x": -776,
|
|
"y": -32,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#dd9c9c",
|
|
"label": "Kill the Dragon",
|
|
"title": "Kill the Dragon",
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"group": "matches",
|
|
"id": "51CB2809-A6E9-46A7-AFEA-42DEF2228C59",
|
|
"x": -559,
|
|
"y": 102,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#a6b8e3",
|
|
"label": "Make the beds",
|
|
"title": "Make the beds",
|
|
"font": {
|
|
"color": "#000000"
|
|
},
|
|
"group": "matches",
|
|
"id": "F37FE14F-DBCB-40A5-8055-F4020FFB37BB",
|
|
"x": -130,
|
|
"y": 156,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
}
|
|
],
|
|
"edges": [
|
|
{
|
|
"id": "6A5795CA-2B17-4133-AB83-E63563935A7B",
|
|
"from": "7BEF6C80-B285-48B3-9736-F0845E612A4F",
|
|
"to": "E255F767-A447-46D7-865C-494C782FC034",
|
|
"type": "maybe also",
|
|
"label": "maybe also",
|
|
"color": "red",
|
|
"style": "dash-line"
|
|
},
|
|
{
|
|
"id": "91DD50F4-BA3A-43CD-A27C-5FE3C8C676A3",
|
|
"from": "7BEF6C80-B285-48B3-9736-F0845E612A4F",
|
|
"to": "F37FE14F-DBCB-40A5-8055-F4020FFB37BB",
|
|
"type": "then",
|
|
"label": "then",
|
|
"color": "slateGray",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "3128CD68-781A-4942-A2EB-FB6AFF0BBEC1",
|
|
"from": "7E692850-2846-41ED-8E7D-F58E7F39680D",
|
|
"to": "51CB2809-A6E9-46A7-AFEA-42DEF2228C59",
|
|
"type": "then",
|
|
"label": "then",
|
|
"color": "slateGray",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "3C620D0A-3A27-41EF-AE3B-A66F5833F63F",
|
|
"from": "51CB2809-A6E9-46A7-AFEA-42DEF2228C59",
|
|
"to": "7BEF6C80-B285-48B3-9736-F0845E612A4F",
|
|
"type": "then",
|
|
"label": "then",
|
|
"color": "slateGray",
|
|
"labelAlignment": "line-above"
|
|
}
|
|
]
|
|
};
|
|
|
|
graph2 = {
|
|
"nodes": [
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Adam",
|
|
"title": "Adam",
|
|
"group": "matches",
|
|
"id": "35b99ac8-aa07-4834-b508-6e9435f573cb",
|
|
"x": -100,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Betsy",
|
|
"title": "Betsy",
|
|
"group": "matches",
|
|
"id": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
|
|
"x": -100,
|
|
"y": -540,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Carol",
|
|
"title": "Carol",
|
|
"group": "matches",
|
|
"id": "4762501a-6bcb-4d35-acfd-f2e9d6310389",
|
|
"x": -230,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Catherine",
|
|
"title": "Catherine",
|
|
"group": "matches",
|
|
"id": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
|
|
"x": -520,
|
|
"y": -210,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Craig",
|
|
"title": "Craig",
|
|
"group": "matches",
|
|
"id": "e017a09b-4526-4b4d-b097-f70e56f20ab4",
|
|
"x": 130,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "George",
|
|
"title": "George",
|
|
"group": "matches",
|
|
"id": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",
|
|
"x": -360,
|
|
"y": -540,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Jessica",
|
|
"title": "Jessica",
|
|
"group": "matches",
|
|
"id": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",
|
|
"x": 20,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "John",
|
|
"title": "John",
|
|
"group": "matches",
|
|
"id": "afd75e95-e45a-4dea-848a-e16ca735bc57",
|
|
"x": -490,
|
|
"y": -540,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Mary",
|
|
"title": "Mary",
|
|
"group": "matches",
|
|
"id": "9c050064-d805-48b3-80a6-181d3599daff",
|
|
"x": -280,
|
|
"y": -210,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Michael",
|
|
"title": "Michael",
|
|
"group": "matches",
|
|
"id": "f24ab062-62a1-4555-a57f-dfcd597c3515",
|
|
"x": -30,
|
|
"y": -210,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Michelle",
|
|
"title": "Michelle",
|
|
"group": "matches",
|
|
"id": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",
|
|
"x": -610,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Robert",
|
|
"title": "Robert",
|
|
"group": "matches",
|
|
"id": "b11149a2-9050-4632-b095-d9d233319b91",
|
|
"x": -360,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
},
|
|
{
|
|
"color": "#97C2FC",
|
|
"label": "Sharon",
|
|
"title": "Sharon",
|
|
"group": "matches",
|
|
"id": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
|
|
"x": -490,
|
|
"y": -380,
|
|
"fixed": {
|
|
"x": true,
|
|
"y": true
|
|
}
|
|
}
|
|
],
|
|
"edges": [
|
|
{
|
|
"id": "62b28c2f-c6dc-4b6b-b108-722eb47d5972",
|
|
"from": "35b99ac8-aa07-4834-b508-6e9435f573cb",
|
|
"to": "f24ab062-62a1-4555-a57f-dfcd597c3515",
|
|
"type": "family:father of",
|
|
"label": "father of",
|
|
"color": "#bc960d",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "4ae8de41-ef1a-400a-b51b-05662ce24597",
|
|
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
|
|
"to": "e017a09b-4526-4b4d-b097-f70e56f20ab4",
|
|
"type": "family:mother of",
|
|
"label": "mother of",
|
|
"color": "#eec75b",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "70f6e36a-ce9a-47b4-97e1-14b2df17d204",
|
|
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
|
|
"to": "8d2a0469-bb6a-4e40-ab1f-3d5edc620415",
|
|
"type": "family:mother of",
|
|
"label": "mother of",
|
|
"color": "#eec75b",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "c32a86ce-ab9a-49b6-a202-e93a37265fda",
|
|
"from": "38d37e10-3c8b-487c-9757-1061d2bbbd07",
|
|
"to": "b11149a2-9050-4632-b095-d9d233319b91",
|
|
"type": "family:mother of",
|
|
"label": "mother of",
|
|
"color": "#eec75b",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "bbce9cc0-0353-45cd-bfa6-a13834ff7218",
|
|
"from": "4762501a-6bcb-4d35-acfd-f2e9d6310389",
|
|
"to": "f24ab062-62a1-4555-a57f-dfcd597c3515",
|
|
"type": "family:mother of",
|
|
"label": "mother of",
|
|
"color": "#eec75b",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "deb7eb05-f667-496b-aeda-205c37b2484b",
|
|
"from": "8ec7f3ee-35f9-4c56-a57b-12d91c0c372e",
|
|
"to": "afd75e95-e45a-4dea-848a-e16ca735bc57",
|
|
"type": "family:brother of",
|
|
"label": "brother of",
|
|
"color": "green",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "3c8c7947-6c82-4f98-978a-26bbb372bfbb",
|
|
"from": "afd75e95-e45a-4dea-848a-e16ca735bc57",
|
|
"to": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
|
|
"type": "family:father of",
|
|
"label": "father of",
|
|
"color": "#bc960d",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "cd4e71e7-9735-4a42-8632-e88cc01ab64f",
|
|
"from": "f24ab062-62a1-4555-a57f-dfcd597c3515",
|
|
"to": "9c050064-d805-48b3-80a6-181d3599daff",
|
|
"type": "family:brother of",
|
|
"label": "brother of",
|
|
"color": "green",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "b4499f60-04f9-4306-9c57-3d73b72f37c0",
|
|
"from": "59d10b18-1c9e-4dcb-ba4f-988ebd7a3efb",
|
|
"to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
|
|
"type": "family:mother of",
|
|
"label": "mother of",
|
|
"color": "#eec75b",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "16562853-b597-44f6-9c55-2ce8a1fe4f83",
|
|
"from": "b11149a2-9050-4632-b095-d9d233319b91",
|
|
"to": "7e17b617-b7a4-4f70-937b-f45ec8dc0a9d",
|
|
"type": "family:father of",
|
|
"label": "father of",
|
|
"color": "#bc960d",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "599dd644-e61f-401e-8b17-dfdd340c125e",
|
|
"from": "b11149a2-9050-4632-b095-d9d233319b91",
|
|
"to": "9c050064-d805-48b3-80a6-181d3599daff",
|
|
"type": "family:father of",
|
|
"label": "father of",
|
|
"color": "#bc960d",
|
|
"labelAlignment": "line-above"
|
|
},
|
|
{
|
|
"id": "961f7f2b-5abe-4036-a155-aa9b30ae1260",
|
|
"from": "b11149a2-9050-4632-b095-d9d233319b91",
|
|
"to": "a1485262-99fe-4b1e-a246-cc70fbb1859a",
|
|
"type": "family:married to",
|
|
"label": "married to",
|
|
"color": "#17bba3",
|
|
"labelAlignment": "line-above"
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// OK, OK ENOUGH SCROLLING
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// HERE IS THE ACTUAL CODE
|
|
|
|
var isGraph1Active = true;
|
|
var action = function() {
|
|
|
|
// switch graphs
|
|
|
|
var graph = isGraph1Active ? graph2 : graph1;
|
|
isGraph1Active = !isGraph1Active;
|
|
|
|
updateGraph(graph.nodes, graph.edges, options);
|
|
|
|
}
|
|
|
|
var data = {
|
|
nodes: new vis.DataSet(),
|
|
edges: new vis.DataSet()
|
|
};
|
|
|
|
var options = {
|
|
"autoResize": true,
|
|
"height": "100%",
|
|
"width": "100%",
|
|
"interaction": {
|
|
"dragNodes":true,
|
|
"dragView": true,
|
|
"hideEdgesOnDrag": false,
|
|
"hideNodesOnDrag": false,
|
|
"hover": false,
|
|
"navigationButtons": true,
|
|
"selectable": true,
|
|
"selectConnectedEdges": true,
|
|
"tooltipDelay": 300,
|
|
"zoomView": true
|
|
|
|
},
|
|
"nodes": {
|
|
"shape": "box",
|
|
"color": {
|
|
"border" : "#2B7CE9",
|
|
"background" : "#97C2FC",
|
|
"highlight": {
|
|
"border": "#2B7CE9",
|
|
"background": "#D2E5FF"
|
|
},
|
|
"hover": {
|
|
"border": "white",
|
|
"background": "white"
|
|
}
|
|
}
|
|
},
|
|
"physics": {
|
|
"barnesHut": {
|
|
"centralGravity": 0,
|
|
"springLength": 240
|
|
}
|
|
},
|
|
|
|
};
|
|
|
|
var container = document.getElementById("visualization1");
|
|
|
|
var network = new vis.Network(container, data, options);
|
|
|
|
var hasNetworkStabilized = false;
|
|
|
|
|
|
var updateGraph = function(nodes, edges, options) {
|
|
|
|
// clear before redrawing a completely different graph
|
|
data.nodes.clear();
|
|
data.edges.clear();
|
|
|
|
// update options for new graph
|
|
this.network.setOptions(options);
|
|
|
|
// allow stabilization again
|
|
hasNetworkStabilized = false;
|
|
|
|
// update data
|
|
data.nodes.update(nodes);
|
|
data.edges.update(edges);
|
|
network.fit()
|
|
}
|
|
|
|
|
|
// RUNTIME
|
|
|
|
updateGraph(graph1.nodes, graph1.edges, options);
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|