added docs for gephi import, expanded example.

10 years ago · 6cb70ac879
--- a/dist/vis-light.js
+++ b/dist/vis-light.js
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/docs/network.html
+++ b/docs/network.html
@ -54,6 +54,7 @@
      <li><a href="#Nodes">Nodes</a></li>
      <li><a href="#Edges">Edges</a></li>
      <li><a href="#DOT_language">DOT language</a></li>
      <li><a href="#Gephi_import">Gephi import</a></li>
    </ul>
  </li>
  <li>
@ -759,7 +760,85 @@ var data = {
 var network = new vis.Network(container, data);
 </pre>

 <h3 id="Gephi_import">Gephi import (JSON)</h3>

 <p>
    network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
    <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
    An example exists showing how to get a JSON file into Vis: <a href="../examples/Network/30_importing_from_gephi.html">30_importing_from_gephi</a>.
 </p>

 <p>
    Example usage:
 </p>

 <pre class="prettyprint lang-js">
 // load the JSON file containing the Gephi network.
 var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30

 // create a data object with the gephi key:
 var data = {
  gephi: gephiJSON
 };

 // create a network
 var network = new vis.Network(container, data);
 </pre>
 Alternatively you can use the parser manually:
 <pre class="prettyprint lang-js">
 // load the JSON file containing the Gephi network.
 var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30

 // parse the gephi file to receive an object
 // containing nodes and edges in vis format.
 var parsed = vis.network.gephiParser.parseGephi(gephiJSON);

 // provide data in the normal fashion
 var data = {
  nodes: parsed.nodes,
  edged: parsed.edges
 };

 // create a network
 var network = new vis.Network(container, data);
 </pre>

 <h4>Gephi parser options</h4>

 There are a few options you can use to tell Vis what to do with the data from Gephi.

 <pre class="prettyprint lang-js">
 var parserOptions = {
  allowedToMove: false,
  parseColor: false
 }
 var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions);
 </pre>
 <table>
 <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
 </tr>

 <tr>
    <td>allowedToMove</td>
    <td>Boolean</td>
    <td>false</td>
    <td>
        If true, the nodes will move according to the physics model after import. If false, the nodes do not move at all.
    </td>
 </tr>
 <tr>
    <td>parseColor</td>
    <td>Boolean</td>
    <td>false</td>
    <td>
        If true, the color will be parsed by the vis parser, generating extra colors for the borders, highlighs and hover. If false, the node will be the supplied color.
    </td>
 </tr>
 </table>

 <h2 id="Configuration_options">Configuration options</h2>

--- a/examples/network/30_importing_from_gephi.html
+++ b/examples/network/30_importing_from_gephi.html
@ -34,12 +34,12 @@
 <body>

 <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
 <div style="width:900px; font-size:14px;">
 <div style="width:700px; font-size:14px;">
    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. An example of this is shown next to the network.
    <br /><br />
    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>


@ -49,55 +49,54 @@
 <div class="nodeContent"><h4>Node Content:</h4> <pre id="nodeContent"></pre></div>

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

    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 nodeContent = document.getElementById("nodeContent");

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

    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {
        nodes: {
            shape: 'dot',
            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: -10000, springConstant: 0.002, springLength: 150}},
        hideEdgesOnDrag: true
    };
 var network;

 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 nodeContent = document.getElementById("nodeContent");

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

 var container = document.getElementById('mynetwork');
 var data = {
    nodes: nodes,
    edges: edges
 };
 var options = {
    nodes: {
        shape: 'dot',
        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: -10000, springConstant: 0.002, springLength: 150}},
    hideEdgesOnDrag: true
 };

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

 /**
 * This function fills the DataSets. These DataSets will update the network.
 */
 function redrawAll(gephiJSON) {
    // only have to get the JSON from the file once
    if (gephiJSON.nodes === undefined) {
        gephiJSON = gephiImported;
    }
@ -105,8 +104,6 @@ function redrawAll(gephiJSON) {
        gephiImported = gephiJSON;
    }


    // empty the DataSets
    nodes.clear();
    edges.clear();

--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@ -6,6 +6,7 @@ var hammerUtil = require('../hammerUtil');
 var DataSet = require('../DataSet');
 var DataView = require('../DataView');
 var dotparser = require('./dotparser');
 var gephiParser = require('./gephiParser');
 var Groups = require('./Groups');
 var Images = require('./Images');
 var Node = require('./Node');
@ -503,6 +504,7 @@ Network.prototype._updateNodeIndexList = function() {
 *                                   {Array | DataSet | DataView} [nodes] Array with nodes
 *                                   {Array | DataSet | DataView} [edges] Array with edges
 *                                   {String} [dot] String containing data in DOT format
 *                                   {String} [gephi] String containing data in gephi JSON format
 *                                   {Options} [options] Object with options
 * @param {Boolean} [disableStart]   | optional: disable the calling of the start function.
 */
@ -528,6 +530,14 @@ Network.prototype.setData = function(data, disableStart) {
      return;
    }
  }
  else if (data && data.gephi) {
    // parse DOT file
    if(data && data.gephi) {
      var gephiData = gephiParser.parseGephi(data.gephi);
      this.setData(gephiData);
      return;
    }
  }
  else {
    this._setNodes(data && data.nodes);
    this._setEdges(data && data.edges);