jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git

<!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 out3. 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 displayed3. 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 graph5. 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>