CODEWITHSUNDEEP
javascripthtmlgraphvis.js
Piotrek
Piotrek

Reputation: 88

Vis, not visible edge on startup

I'm using VIS to build a graph, but there is a problem. If I create simple hierarchical graph: with 3 vertices and 3 edges one edge is not visible (It is hiding behind two others and vertex). Using smoothCurves with diagonalCross type is part of solution - graph looks fine, but after moving vertices. Directly after page is loaded edge is not visible. Is it possible to fix it?

Heres my code:

<!doctype html>
<html>
<head>
  <title>Network | Basic usage</title>
  <script type="text/javascript" src="vis.js"></script>
  <link rel="stylesheet" type="text/css" href="vis.css">
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
  // create an array with nodes
  var nodes = [
    {id: 1, label: 'Node 1', level:0},
    {id: 2, label: 'Node 2', level:1},
    {id: 4, label: 'Node 4', level:2}
  ];

  // create an array with edges
  var edges = [
    {from: 1, to: 2},
    {from: 1, to: 4},
    {from: 2, to: 4}
  ];

  // create a network
  var container = document.getElementById('mynetwork');
  var data= {
    nodes: nodes,
    edges: edges,
  };
  var options = {
    width: '900px',
    height: '900px',
    edges:
    {
        style: 'arrow'
    },
    dragNetwork: true,
    navigation: true,
    keyboard: true,
    <!-- dragNodes: false, -->
    hierarchicalLayout: {enabled:true}
  };
  var network = new vis.Network(container, data, options);
  var type = "diagonalCross";
  network.setOptions({smoothCurves:{type:type}});
</script>
</body>
</html>

It is important to use hierarchical view for me.

Upvotes: 2

Views: 1263

Answers (1)

stanleyxu2005
stanleyxu2005

Reputation: 8241

I think the HTML styled comment inside javascript prevents browser to understand your code. Simply remove the comment and refresh your browser. Like this:

var options = {
    width: '900px',
    height: '900px',
    edges: {
        style: 'arrow'
    },
    dragNetwork: true,
    navigation: true,
    keyboard: true,
    // <!-- dragNodes: false, -->
    hierarchicalLayout: {enabled:true}
  };

Upvotes: 2

Related Questions