Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
<head>
  <title>network - Fixed scale</title>
​
  <style type="text/css">
    #mynetwork {
      border: 1px solid black;
      background: white;
      display: inline-block;
      height: 400px;
      width: 400px;
    }
  </style>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
​
<p>
  This graph has been pared down as minimal as possible while still showing the anomalous behavior.
  There should be 8 purple nodes distributed around the center as the fixed vertices of an octagon.
  However, 2 of them are being incorrectly rendered in the center of the network.
  Each vertex is 20000 units from the center. Inside the octagon are several nodes which have some edges between them.
  If you take away one of those nodes, the 2 mis-placed vertices render correctly.
  
  
  
</p>
​
  <button onclick="toggle">toggle node</button><br/>
  
<div id="mynetwork"></div>
​
<script type="text/javascript">
  
  var nodeData = [
  {
    "id": 0,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": 0,
    "y": -20000,
    "fixed": true,
    "physics": false
  },
  {
    "id": 1,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": 0,
    "y": 20000,
    "fixed": true,
    "physics": false
  },
  {
    "id": 2,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": -14142.13562373095,
    "y": 14142.13562373095,
    "fixed": true,
    "physics": false
  },
  {
    "id": 3,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": 20000,
    "y": 0,
    "fixed": true,
    "physics": false
  },
  {
    "id": 4,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": 14142.13562373095,
    "y": 14142.13562373095,
    "fixed": true,
    "physics": false
  },
  {
    "id": 5,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": 14142.13562373095,
    "y": -14142.13562373095,
    "fixed": true,
    "physics": false
  },
  {
    "id": 6,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": -20000,
    "y": 0,
    "fixed": true,
    "physics": false
  },
  {
    "id": 7,
    "label": "Fixed",
    "color": {
      "background": "#DAD4FF"
    },
    "x": -14142.13562373095,
    "y": -14142.13562373095,
    "fixed": true,
    "physics": false
  },
  {
    "id": 8,
  },
  {
    "id": 9,
  },
  {
    "id": 10,
  },
  {
    "id": 11,
  },
  {
    "id": 12,
  },
  {
    "id": 13,
  },
  {
    "id": 14,
  },
  {
    "id": 15,
  },
  {
    "id": 16,
  }];
  var edgeData = [
    {
      "from": 8,
      "to": 0,
    },
    {
      "from": 8,
      "to": 1,
    },
    {
      "from": 8,
      "to": 9,
    }
  ];
  
  // create an array with nodes
  var nodes = new vis.DataSet(nodeData);
​
  // create an array with edges
  var edges = new vis.DataSet(edgeData);
​
  
  // create a network
  var container = document.getElementById('mynetwork');
  var data = {
    nodes: nodes,
    edges: edges
  };
  var width = 400;
  var height = 400;
  var options = {
    width: '100%',
    height: '100%',
    nodes: {
      shape: 'dot',
      value: 2000,
      scaling: {
        max: 2000
      }
    },
    physics: {
      barnesHut: {
        springLength: 10000,
      }    
    },
    edges: {
      smooth: false
    },
    interaction: {
      hover: true
    } 
  };
  var network = new vis.Network(container, data, options);
​
  // set "title" as coordinates on hover
  network.on('hoverNode', (eventData) => {
    let nodeId = eventData.node;
    let positions = network.getPositions([nodeId]);
    let title = 'x=' + positions[nodeId].x + ', y=' + positions[nodeId].y;
    data.nodes.get(nodeId).title = title;
  });
  
  function toggle() {
    let node = data.nodes.get(16);
    if (node) {
      data.nodes.remove(16);
    }
    else {
      data.nodes.add({id:16});
    }
  }
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers