How to give a node an option in Vis.js to

Question

I'm using vis.js and want to render a graph that looks like this one: http://visjs.org/examples/network/nodeStyles/circularImages.html

The problem is that I don't know how to set image per node. In documentation it's said:

When you have given a node an option, you will override the global option for that property, and also the group option for that property if the node is in a group. If you then set that option to null, it will revert back to the default value.

But nothing is said about how to give option to a particular node.

Here's my code:

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">

    var dot = 'hello {Hey->"I am lost"; 2->3; 5->3;}';
    var parsed = vis.network.convertDot(dot);

    var data = {
      nodes: parsed.nodes,
      edges: parsed.edges
    }

    var options = parsed.options;


    options.nodes = {
      // everything that is here will apply globaly

    }

    var container = document.getElementById('mynetwork');

    var network = new vis.Network(container, data, options);
</script>
</body>
</html>

score 0 · Answer 1 · answered May 01 '23 at 20:59

0

It's not documented clearly but to set options for individual nodes such as x and y, you add them to the nodes themselves (not the options) in the data object.

answered May 01 '23 at 20:59

JimmyJames

1,356
1
12
24

score -1 · Answer 2 · edited May 23 '17 at 10:29

Ok, never mind... It seems that I've already found an answer. It seems like using the Dot language doesn't let a user to customize nodes individually.

This answer helped me: How to set the image size in Vis.js network graph

Here's what I have

<html>
<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
            height: 400px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id="mynetwork"></div>

<script type="text/javascript">
var edges = [];
var nodes = [];

nodes.push({
     id: 7,
     shape: 'image',
     image: 'https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg',
     label: 'Google',
     widthMin: 20,
     widthMax: 20
 });

 nodes.push({
   id: 1,
   label: 'hello!'
 });

 nodes.push({
   id: 2,
   shape: 'image',
   image: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSbvJNLcGgzruK47eQfHZrcotFzMF0yeK28jgFUJCXh-36zm3Nz',
   label: 'Maps'

 })

 edges.push({
   from: 2,
   to: 7,
   arrows: 'from'
 })

 edges.push({
     from: 1,
     to: 7,
     length: 100
 });

 var data = {
     nodes: nodes,
     edges: edges
 };

  var options = {};
  var container = document.getElementById('mynetwork');
  network = new vis.Network(container, data, options);

 </script>
 </body>
 </html>

How to give a node an option in Vis.js to

2 Answers2