Removed example 21 and renamed 31

10 years ago · b8206c593c
--- a/examples/network/21_data_manipulation.html
+++ b/examples/network/21_data_manipulation.html
@ -1,185 +0,0 @@
 <!doctype html>
 <html>
 <head>
  <title>Network | Data Manipulation</title>

  <style type="text/css">
    body {
      font: 10pt sans;
    }
    #mynetwork {
      position:relative;
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
    table.legend_table {
      font-size: 11px;
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
    }
    table.legend_table,td {
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
      padding: 2px;
    }
    div.table_content {
      width:80px;
      text-align:center;
    }
    div.table_description {
      width:100px;
    }

    #operation {
      font-size:28px;
    }
    #network-popUp {
      display:none;
      position:absolute;
      top:350px;
      left:170px;
      z-index:299;
      width:250px;
      height:120px;
      background-color: #f9f9f9;
      border-style:solid;
      border-width:3px;
      border-color: #5394ed;
      padding:10px;
      text-align: center;
    }
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link type="text/css" rel="stylesheet" href="../../dist/vis.css">

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

    function draw() {
      nodes = [];
      edges = [];
      var connectionCount = [];

      // randomly create some nodes and edges
      var nodeCount = 25;
      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: String(i)
        });

        connectionCount[i] = 0;

        // create edges in a scale-free-network way
        if (i == 1) {
          var from = i;
          var to = 0;
          edges.push({
            from: from,
            to: to
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
        else if (i > 1) {
          var conn = edges.length * 2;
          var rand = Math.floor(Math.random() * conn);
          var cum = 0;
          var j = 0;
          while (j < connectionCount.length && cum < rand) {
            cum += connectionCount[j];
            j++;
          }

          var from = i;
          var to = j;
          edges.push({
            from: from,
            to: to
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
      }

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        physics: {
          stabilization: false
        },
        manipulation: true
      };
      network = new vis.Network(container, data, options);

      // add event listeners
      network.on('select', function(params) {
        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
      });

      network.on("resize", function(params) {console.log(params.width,params.height)});

      function clearPopUp() {
        var saveButton = document.getElementById('saveButton');
        var cancelButton = document.getElementById('cancelButton');
        saveButton.onclick = null;
        cancelButton.onclick = null;
        var div = document.getElementById('network-popUp');
        div.style.display = 'none';

      }

      function saveData(data,callback) {
        var idInput = document.getElementById('node-id');
        var labelInput = document.getElementById('node-label');
        var div = document.getElementById('network-popUp');
        data.id = idInput.value;
        data.label = labelInput.value;
        clearPopUp();
        callback(data);

      }
    }
  </script>
  <script src="../googleAnalytics.js"></script>
 </head>

 <body onload="draw();">
 <h2>Editing the dataset</h2>
 <div style="width: 700px; font-size:14px; text-align: justify;">
  In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
  If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
  <br /><br />
  The data manipulation allows the user to add nodes, connect them, edit them and delete any selected items. In this example we have created trigger functions
  for the add and edit operations. By settings these trigger functions the user can direct the way the data is manipulated. In this example we have created a simple
  pop-up that allows us to edit some of the properties.
 </div>
 <br />

 <div id="network-popUp">
  <span id="operation">node</span> <br>
  <table style="margin:auto;"><tr>
    <td>id</td><td><input id="node-id" value="new value"></td>
  </tr>
    <tr>
      <td>label</td><td><input id="node-label" value="new value"> </td>
    </tr></table>
  <input type="button" value="save" id="saveButton"></button>
  <input type="button" value="cancel" id="cancelButton"></button>
 </div>
 <br />
 <div id="mynetwork"></div>

 <p id="selection"></p>
 </body>
 </html>

--- a/examples/network/31_manipulation_and_localization.html
+++ b/examples/network/31_manipulation_and_localization.html
--- a/examples/network/index.html
+++ b/examples/network/index.html
@ -41,7 +41,7 @@
  <p><a href="28_world_cup_network_performance.html">28_world_cup_network_performance.html</a></p>
  <p><a href="29_neighbourhood_highlight.html">29_neighbourhood_highlight.html</a></p>
  <p><a href="30_importing_from_gephi.html">30_importing_from_gephi.html</a></p>
  <p><a href="31_localization.html">31_localization.html</a></p>
  <p><a href="31_manipulation_and_localization.html">31_localization.html</a></p>
  <p><a href="32_hierarchicaLayoutMethods.html">32_hierarchicaLayoutMethods.html</a></p>
  <p><a href="33_animation.html">33_animation.html</a></p>
  <p><a href="34_circular_images.html">34_circular_images.html</a></p>