added few examples, added gephi parser (JSON), added JSON get for dataset

10 years ago · cd131960dc
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/docs/dataset.html
+++ b/docs/dataset.html
@ -691,6 +691,13 @@ DataSet.map(callback [, options]);
    <td>Order the items by a field name or custom sort function.</td>
  </tr>

  <tr>
      <td>returnType</td>
      <td>String</td>
      <td>Determine the type of output of the get function. Allowed values are <code>Array | Object | DataTable</code>.
          The <code>DataTable</code> refers to a Google DataTable. The default returnType is an array. The object type will return a JSON object with the ID's as keys.</td>
  </tr>

 </table>

 <p>
--- a/examples/network/02_random_nodes.html
+++ b/examples/network/02_random_nodes.html
@ -31,7 +31,8 @@
      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: String(i)
          label: String(i),
          radius:300
        });

        connectionCount[i] = 0;
--- a/examples/network/29_neighbourhood_highlight.html
+++ b/examples/network/29_neighbourhood_highlight.html
--- a/examples/network/30_importing_from_gephi.html
+++ b/examples/network/30_importing_from_gephi.html
@ -0,0 +1,87 @@
 <!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>Network |  Static smooth curves - World Cup Network</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;
        }
    </style>
 </head>

 <body>

 <h2>Dynamic Data - Neighbourhood Highlight</h2>
 <div style="width:700px; font-size:14px;">
    This example shows the power of the DataSet. Once a node is clicked, all nodes are greyed out except for the first and second order connected nodes.
    In this example we show how you can determine the order of connection per node as well as applying individual styling to the nodes based on whether or not
    they are connected to the selected node. The code doing the highlighting only takes about 20ms, the rest of the time is the redrawing of the network (9200 edges..).
 </div>

 <div id="mynetwork"></div>

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

 var nodes = new vis.DataSet();
 var edges = new vis.DataSet();

 function redrawAll() {
    nodes.clear();
    edges.clear();

    network = null;
    // create an array with nodes



    nodes.add(nodesData);
    edges.add(edgesData);

    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    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
    };

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


 redrawAll()

 </script>



 </body></html>
--- a/examples/network/data/WorldCup2014.json
+++ b/examples/network/data/WorldCup2014.json
--- a/lib/DataSet.js
+++ b/lib/DataSet.js
@ -322,7 +322,8 @@ DataSet.prototype.get = function (args) {
  // determine the return type
  var returnType;
  if (options && options.returnType) {
    returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
    var allowedValues = ["DataTable", "Array", "Object"];
    returnType = allowedValues.indexOf(options.returnType) == -1 ? "Array" : options.returnType;

    if (data && (returnType != util.getType(data))) {
      throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
@ -401,12 +402,19 @@ DataSet.prototype.get = function (args) {
    }
    else {
      // copy the items to the provided data table
      for (i = 0, len = items.length; i < len; i++) {
      for (i = 0; i < items.length; i++) {
        me._appendRow(data, columns, items[i]);
      }
    }
    return data;
  }
  else if (returnType == "Object") {
    var result = {};
    for (i = 0; i < items.length; i++) {
      result[items[i].id] = items[i];
    }
    return result;
  }
  else {
    // return an array
    if (id != undefined) {
--- a/lib/network/Groups.js
+++ b/lib/network/Groups.js
@ -53,7 +53,6 @@ Groups.prototype.clear = function () {
 */
 Groups.prototype.get = function (groupname) {
  var group = this.groups[groupname];

  if (group == undefined) {
    // create new group
    var index = this.defaultIndex % Groups.DEFAULT.length;
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@ -171,7 +171,7 @@ Node.prototype.setProperties = function(properties, constants) {
  }

  // copy group properties
  if (this.group) {
  if (this.group !== undefined) {
    var groupObj = this.grouplist.get(this.group);
    for (var prop in groupObj) {
      if (groupObj.hasOwnProperty(prop)) {
@ -180,6 +180,7 @@ Node.prototype.setProperties = function(properties, constants) {
    }
  }


  // individual shape properties
  if (properties.shape !== undefined)          {this.shape = properties.shape;}
  if (properties.image !== undefined)          {this.image = properties.image;}
--- a/lib/network/gephiParser.js
+++ b/lib/network/gephiParser.js
@ -0,0 +1,59 @@

 function parseGephi(gephiJSON, options) {
  var edges = [];
  var nodes = [];
  this.options = {
    edges: {
      inheritColor: 'from'
    },
    nodes: {
      allowedToMove: false,
      parseColor: false
    }
  };
  if (options !== undefined) {
    this.options.edges['inheritColor']  = options.inheritColor  | 'from';
    this.options.nodes['allowedToMove'] = options.allowedToMove | false;
    this.options.nodes['parseColor']    = options.parseColor    | false;
  }

  var gEdges = gephiJSON.edges;
  var gNodes = gephiJSON.nodes;

  for (var i = 0; i < gEdges.length; i++) {
    var edge = {};
    edge['id'] = gEdges.id;
    edge['from'] = gEdges.source;
    edge['to'] = gEdges.target;
    edge['attributes'] = gEdges.attributes;
    edge['value'] = gEdges.attributes !== undefined ? gEdges.attributes.Weight : undefined;
    edge['width'] = gEdges.size;
    edge['color'] = gEdges.color;
    edge['inheritColor'] = edge['color'] !== undefined ? false : this.options.inheritColor;
    edges.push(edge);
  }

  for (var i = 0; i < gNodes.length; i++) {
    var node = {};
    node['id'] = gNodes.id;
    node['attributes'] = gNodes.attributes;
    node['x'] = gNodes.x;
    node['y'] = gNodes.y;
    node['label'] = gNodes.label;
    if (this.options.parseColor == true) {
      node['color'] = gNodes.color;
    }
    else {
      node['color'] = gNodes.color !== undefined ? {background:gNodes.color, border:gNodes.color} : undefined;
    }
    node['radius'] = gNodes.size;
    node['allowedToMoveX'] = this.options.allowedToMove;
    node['allowedToMoveY'] = this.options.allowedToMove;
    node['shape'] = 'dot'
    nodes.push(node);
  }

  return {nodes:nodes, edges:edges};
 }

 exports.parseGephi = parseGephi;
--- a/lib/util.js
+++ b/lib/util.js
@ -974,9 +974,9 @@ exports.RGBToHSV = function(red,green,blue) {

 /**
 * https://gist.github.com/mjijackson/5311256
 * @param hue
 * @param saturation
 * @param value
 * @param h
 * @param s
 * @param v
 * @returns {{r: number, g: number, b: number}}
 * @constructor
 */