Merge remote-tracking branch 'origin/v4' into v4

Conflicts: examples/network/27_world_cup_network.html
9 years ago · 0d03373eb5
--- a/examples/network/27_world_cup_network.html
+++ b/examples/network/27_world_cup_network.html
@ -69,80 +69,81 @@ Hide nodes on drag:
 <div id="mynetwork"></div>

 <script type="text/javascript">
 //  var dropdown = document.getElementById("dropdownID");
 //  dropdown.onchange = update;
 //
 //  var roundnessSlider = document.getElementById("roundnessSlider");
 //  roundnessSlider.onchange = update;
 //
 //  var roundnessScreen = document.getElementById("roundnessScreen");
 //  var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
 //  hideEdgesOnDrag.onchange = update;
 //  var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
 //  hideNodesOnDrag.onchange = update;
 //  var inheritColor = document.getElementById("inheritColor");
 //  inheritColor.onchange = redrawAll;
 //
  var dropdown = document.getElementById("dropdownID");
  dropdown.onchange = update;

  var roundnessSlider = document.getElementById("roundnessSlider");
  roundnessSlider.onchange = update;

  var roundnessScreen = document.getElementById("roundnessScreen");
  var hideEdgesOnDrag = document.getElementById("hideEdgesOnDrag");
  hideEdgesOnDrag.onchange = update;
  var hideNodesOnDrag = document.getElementById("hideNodesOnDrag");
  hideNodesOnDrag.onchange = update;
  var inheritColor = document.getElementById("inheritColor");
  inheritColor.onchange = redrawAll;

  var network;


  function redrawAll() {
 //    network = null;
 //
 //    var inheritColorVal = inheritColor.value;
    network = null;

    var inheritColorVal = inheritColor.value;

    var container = document.getElementById('mynetwork');
    var options = {}
 //      nodes: {
 //        shape: 'dot',
 //        radiusMin: 10,
 //        radiusMax: 30,
 //        fontSize: 12,
 //        fontFace: "Tahoma"
 //      },
 //      edges: {
 //        width: 0.15,
 //        inheritColor: "from"
 //      },
 //      tooltip: {
 //        delay: 200,
 //        fontSize: 12,
 //        color: {
 //          background: "#fff"
 //        }
 //      },
 //      smoothCurves: {dynamic: false, type: "continuous"},
 //      stabilize: false,
 //      physics: {
 //        barnesHut: {
 //          gravitationalConstant: 0,
 //          centralGravity: 0,
 //          springConstant: 0
 //        }
 //      },
 //      hideEdgesOnDrag: true
 //    };

 //    if (inheritColorVal == "false") {
 //      options['edges']['inheritColor'] = false;
 //    }
 //    else {
 //      options['edges']['inheritColor'] = inheritColorVal;
 //    }
    var options = {
      nodes: {
        shape: 'dot',
        scaling: {
          min: 10,
          max: 30
        },
        font: {
          size: 12,
          face: "Tahoma"
        }
      },
      edges: {
        width: 0.15,
        color: {
          inherit: (inheritColorVal == "false") ? false : inheritColorVal
        },
        smooth: {
          dynamic: false,
          type: "continuous"
        }
      },
      interaction: {
        tooltipDelay: 200
      },
      rendering: {
        hideEdgesOnDrag: true
      },
      physics: false
    };

    // Note: data is coming from ./data/WorldCup2014.js
    network = new vis.Network(container, data, options);
    network.fit({animation: false});
  }

  function update() {
    var type = dropdown.value;
    var roundness = roundnessSlider.value;
    roundnessScreen.value = roundness;
    var options = {smoothCurves: {type: type, roundness: roundness}}
    options['hideEdgesOnDrag'] = hideEdgesOnDrag.checked;
    options['hideNodesOnDrag'] = hideNodesOnDrag.checked;

    //network.setOptions(options);
    var options = {
      edges: {
        smooth: {
          type: type,
          roundness: roundness
        }
      }
    };
    options.rendering.hideEdgesOnDrag = hideEdgesOnDrag.checked;
    options.rendering.hideNodesOnDrag = hideNodesOnDrag.checked;

    network.setOptions(options);
  }

  redrawAll()
--- a/examples/network/29_neighbourhood_highlight.html
+++ b/examples/network/29_neighbourhood_highlight.html
@ -15,7 +15,8 @@
            border: 1px solid lightgray;
        }
    </style>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
    <script src="../googleAnalytics.js"></script>
 </head>

 <body>

@ -213,6 +214,4 @@ redrawAll()

 </script>



 </body></html>
--- a/examples/network/30_importing_from_gephi.html
+++ b/examples/network/30_importing_from_gephi.html
@ -1,107 +1,148 @@
 <!DOCTYPE html>
 <!-- saved from url=(0044)http://kenedict.com/networks/worldcup14/vis/ , thanks Andre!-->
 <html><head><meta http-equiv="content-type" content="text/html; charset=UTF8">
    <title>Dynamic Data - Importing from Gephi (JSON)</title>
    <script type="text/javascript" src="../../dist/vis.js"></script>
    <link type="text/css" rel="stylesheet" href="../../dist/vis.css">

    <style type="text/css">
        #mynetwork {
            width: 800px;
            height: 800px;
            border: 1px solid lightgray;
        }
 <html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF8">
  <title>Dynamic Data - Importing from Gephi (JSON)</title>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link type="text/css" rel="stylesheet" href="../../dist/vis.css">

  <style type="text/css">
    #mynetwork {
      width: 800px;
      height: 800px;
      border: 1px solid lightgray;
    }

        div.nodeContent {
            position: relative;
            border: 1px solid lightgray;
            width:480px;
            height:780px;
            margin-top: -802px;
            margin-left: 810px;
            padding:10px;
        }
    div.nodeContent {
      position: relative;
      border: 1px solid lightgray;
      width: 480px;
      height: 780px;
      margin-top: -802px;
      margin-left: 810px;
      padding: 10px;
    }

        pre {padding: 5px; margin: 5px; }
        .string { color: green; }
        .number { color: darkorange; }
        .boolean { color: blue; }
        .null { color: magenta; }
        .key { color: red; }
    </style>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
    pre {
      padding: 5px;
      margin: 5px;
    }

    .string {
      color: green;
    }

    .number {
      color: darkorange;
    }

    .boolean {
      color: blue;
    }

    .null {
      color: magenta;
    }

    .key {
      color: red;
    }
  </style>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body>

 <h2>Dynamic Data - Importing from Gephi (JSON)</h2>

 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows how to import a JSON file exported by Gephi. The two options available for the import are
    available through the checkboxes. You can download the Gephi JSON exporter here:
    <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
    All of Gephi's attributes are also contained within the node elements. This means you can access all of this data through the DataSet.
    <br />
  This example shows how to import a JSON file exported by Gephi. The two
  options available for the import are
  available through the checkboxes. You can download the Gephi JSON exporter
  here:
  <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
  All of Gephi's attributes are also contained within the node elements. This
  means you can access all of this data through the DataSet.
  <br/>
 </div>

 <p>
  <label><input type="checkbox" id="allowedToMove"/> Allow to move after import.</label><br>
  <label><input type="checkbox" id="parseColor"/> Parse the color instead of
    copy (adds borders, highlights etc.)</label>
 </p>

 <input type="checkbox" id="allowedToMove">: Allow to move after import. <br/>
 <input type="checkbox"  id="parseColor">: Parse the color instead of copy (adds borders, highlights etc.)
 <div id="mynetwork"></div>
 <div class="nodeContent"><h4>Node Content:</h4> <pre id="nodeContent"></pre></div>
 <div class="nodeContent"><h4>Node Content:</h4>
  <pre id="nodeContent"></pre>
 </div>

 <script type="text/javascript">
 var network;
  var network;

 var nodes = new vis.DataSet();
 var edges = new vis.DataSet();
 var gephiImported;
 var allowedToMoveCheckbox = document.getElementById("allowedToMove");
 allowedToMoveCheckbox.onchange = redrawAll;
  var nodes = new vis.DataSet();
  var edges = new vis.DataSet();
  var gephiImported;
  var allowedToMoveCheckbox = document.getElementById("allowedToMove");
  allowedToMoveCheckbox.onchange = redrawAll;

 var parseColorCheckbox = document.getElementById("parseColor");
 parseColorCheckbox.onchange = redrawAll;
  var parseColorCheckbox = document.getElementById("parseColor");
  parseColorCheckbox.onchange = redrawAll;

 var nodeContent = document.getElementById("nodeContent");
  var nodeContent = document.getElementById("nodeContent");

 loadJSON("./data/WorldCup2014.json",redrawAll);
  loadJSON("./data/WorldCup2014.json", redrawAll);

 var container = document.getElementById('mynetwork');
 var data = {
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
 };
 var options = {
  };
  var options = {
    nodes: {
        shape: 'dot',
        fontFace: "Tahoma"
      shape: 'dot',
      font: {
        face: "Tahoma"
      }
    },
    edges: {
        width: 0.15,
        inheritColor: "from"
      width: 0.15,
      color: {
        inherit: "from"
      },
      smooth: {
        dynamic: false,
        type: "continuous"
      }
    },
    tooltip: {
        delay: 200,
        fontSize: 12,
        color: {
            background: "#fff"
        }
    interaction: {
      tooltipDelay: 200
    },
    physics: {
      stabilization: false,
      barnesHut: {
        gravitationalConstant: -10000,
        springConstant: 0.002,
        springLength: 150
      }
    },
    smoothCurves: {dynamic:false, type: "continuous"},
    stabilize: false,
    physics: {barnesHut: {gravitationalConstant: -10000, springConstant: 0.002, springLength: 150}},
    hideEdgesOnDrag: true
 };

 network = new vis.Network(container, data, options);

 /**
 * This function fills the DataSets. These DataSets will update the network.
 */
 function redrawAll(gephiJSON) {
    rendering: {
      hideEdgesOnDrag: true
    }
  };

  network = new vis.Network(container, data, options);

  /**
   * This function fills the DataSets. These DataSets will update the network.
   */
  function redrawAll(gephiJSON) {
    if (gephiJSON.nodes === undefined) {
        gephiJSON = gephiImported;
      gephiJSON = gephiImported;
    }
    else {
        gephiImported = gephiJSON;
      gephiImported = gephiJSON;
    }

    nodes.clear();
@ -109,7 +150,10 @@ function redrawAll(gephiJSON) {

    var allowedToMove = allowedToMoveCheckbox.checked;
    var parseColor = parseColorCheckbox.checked;
    var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {allowedToMove:allowedToMove, parseColor:parseColor});
    var parsed = vis.network.gephiParser.parseGephi(gephiJSON, {
      allowedToMove: allowedToMove,
      parseColor: parseColor
    });

    // add the parsed data to the DataSets.
    nodes.add(parsed.nodes);
@ -117,50 +161,50 @@ function redrawAll(gephiJSON) {

    var data = nodes.get(2); // get the data from node 2
    nodeContent.innerHTML = syntaxHighlight(data); // show the data in the div
    network.zoomExtent(); // zoom to fit
 }
    network.fit(); // zoom to fit
  }

 // from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
 function syntaxHighlight(json) {
  // from http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
  function syntaxHighlight(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, 2);
      json = JSON.stringify(json, null, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
      var cls = 'number';
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key';
        } else {
          cls = 'string';
        }
        return '<span class="' + cls + '">' + match + '</span>';
      } else if (/true|false/.test(match)) {
        cls = 'boolean';
      } else if (/null/.test(match)) {
        cls = 'null';
      }
      return '<span class="' + cls + '">' + match + '</span>';
    });
 }
  }

 function loadJSON(path, success, error) {
  function loadJSON(path, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                success(JSON.parse(xhr.responseText));
            }
            else {
                error(xhr);
            }
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          success(JSON.parse(xhr.responseText));
        }
        else {
          error(xhr);
        }
      }
    };
    xhr.open("GET", path, true);
    xhr.send();
 }
  }

 </script>



 </body></html>
 </body>
 </html>
--- a/examples/network/31_localization.html
+++ b/examples/network/31_localization.html
@ -122,8 +122,10 @@
        edges: edges
      };
      var options = {
        stabilize: false,
        dataManipulation: true,
        physics: {
          stabilization: false
        },
        manipulation: true,
        onAdd: function(data,callback) {
          var span = document.getElementById('operation');
          var idInput = document.getElementById('node-id');
@ -203,7 +205,8 @@
      select.onchange();
    }
  </script>
 <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">
 <h2>Editing the dataset (localized)</h2>