CODEWITHSUNDEEP
javascriptjsonvis.jsvis.js-network
Patrick Warichet
Patrick Warichet

Reputation: 31

vis.js cannot change edges color when importing from json

I am trying to import a network json file to vis.js and would like to have all the edges displayed in their respective colors.

It works for nodes but not for edges, is there a way to display edges independently from their respective nodes ? Any guidance is appreciated

here is the json file

{ 
  "nodes":
  [
    {
      "id": "1",
      "label": "A",
      "color": "rgb(128,128,128)"
    },
    {
      "id": "2", 
      "label": "B",
      "color": "rgb(0,255,0)"
    },
    {
      "id": "3", 
      "label": "C",
      "color": "rgb(0,0,255)"
    }
  ],
  "edges": 
  [
    {
      "source": "1",
      "target": "2", 
      "id": "1", 
      "color": "rgb(255,0,0)"
    },
    { 
      "source": "1",
      "target": "3",
      "id": "2",
      "color": "rgb(0,0,0)"
     }
  ]
}

Here is the HTML page

<!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="../exampleUtil.js"></script>

  <script type="text/javascript" src="../../../dist/vis.js"></script>
  <link type="text/css" rel="stylesheet" href="../../../dist/vis-network.min.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;
    }

    pre {
      padding: 5px;
      margin: 5px;
    }

    .string {
      color: green;
    }

    .number {
      color: darkorange;
    }

    .boolean {
      color: blue;
    }

    .null {
      color: magenta;
    }

    .key {
      color: red;
    }
  </style>
  
</head>

<body>

<h2>Importing from Gephi (JSON)</h2>


<div id="mynetwork"></div>
<div class="edgeContent"><h4>Node Content:</h4>
  <pre id="edgeContent"></pre>
</div>

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

  var nodes = new vis.DataSet();
  var edges = new vis.DataSet();
  var gephiImported;
 
  var nodeContent = document.getElementById('nodeContent');

  var parserOptions = {
    edges: {
      inheritColors: false
    },
    nodes: {
      fixed: true,
      parseColor: false
    }
  }

  var gephiJSON = loadJSON('../datasources/test.json', redrawAll, function(err) {console.log('error')});

  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };

  var options = {
    edges: {
      color: {
        inherit: false,
      }
    },
    physics: {
      stabilization: false,
    }
  };

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

  /**
   * This function fills the DataSets. These DataSets will update the network.
   */
  function redrawAll(gephiJSON) {

    nodes.clear();
    edges.clear();

    var parsed = vis.network.gephiParser.parseGephi(gephiJSON, parserOptions);


    // add the parsed data to the DataSets.
    nodes.add(parsed.nodes);
    edges.add(parsed.edges);
    console.log(parsed.edges)

    network.fit(); // zoom to fit
  }

</script>
</script>

</body>
</html>

Upvotes: 3

Views: 842

Answers (1)

Sierra
Sierra

Reputation: 11

Your JSON data structure looks like what vis.js expects. Could it be that you are setting your edges color option 'inherit' to false? From the documentation example, it sets this field to 'from' for the edge options of the network, OR change the key to 'inheritColors' if you're adjusting the parser options: https://almende.github.io/vis/docs/network/edges.html; https://almende.github.io/vis/docs/network/index.html?keywords=network (Control F for 'inheritColors')

Upvotes: 0

Related Questions