I am using vis.js to display network nodes. I am parsing the node data from JSON and storing it in an array:

$.each(jsonObj, function(i, val) {  

    var itemId      = val.id;
    var itemGroup   = val.group;
    var itemLabel   = val.label;
    var itemLevel   = val.level;
    var itemData    = val.nodeData;
    var itemX       = val.x;
    var itemY       = val.y;
    var nodeData    = JSON.parse(val.nodeData);

nodes[nodeCnt] = { id: itemId, group: itemGroup, label: itemLabel, level: itemLevel, title: itemData, x: itemX, y: itemY, font: { color: colour }, color: { border: colour }};
        nodeCnt++;

}

This work perfectly and I can display my network:

var data = {
    nodes: nodes,
    edges: edges

};

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

I use an event handler to take action when a node it clicked, I parse the ID of the clicked node (this is the shorthand version):

network.on("click", function (params) {

        // parse node id
        var nodeID = params['nodes']['0'];

}

I would like to update the color of the node, I have tried various variation including the following to no avail?

var options = {
    nodes:{
        id: nodeID,
        borderWidth: 20,
        color: {
            border: '#000000',
            background: '#000000',
            border:  '#000000',
            highlight: {
                border: '#2B7CE9',
                background: '#D2E5FF'
            }
        }
    }
}
network.setOptions(options);

I have been round and round trying different ways of doing this. If I remove the "id: nodeID," parameter from the above options I would expect all the nodes to be updated, however none are.

I am using standard id's for my nodes: 595191aa-98c6-4a4b-a0e0-4262df83e0de

Any ideas?

Thank you in advance.

I am using vis.js to display network nodes. I am parsing the node data from JSON and storing it in an array:

$.each(jsonObj, function(i, val) {  

    var itemId      = val.id;
    var itemGroup   = val.group;
    var itemLabel   = val.label;
    var itemLevel   = val.level;
    var itemData    = val.nodeData;
    var itemX       = val.x;
    var itemY       = val.y;
    var nodeData    = JSON.parse(val.nodeData);

nodes[nodeCnt] = { id: itemId, group: itemGroup, label: itemLabel, level: itemLevel, title: itemData, x: itemX, y: itemY, font: { color: colour }, color: { border: colour }};
        nodeCnt++;

}

This work perfectly and I can display my network:

var data = {
    nodes: nodes,
    edges: edges

};

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

I use an event handler to take action when a node it clicked, I parse the ID of the clicked node (this is the shorthand version):

network.on("click", function (params) {

        // parse node id
        var nodeID = params['nodes']['0'];

}

I would like to update the color of the node, I have tried various variation including the following to no avail?

var options = {
    nodes:{
        id: nodeID,
        borderWidth: 20,
        color: {
            border: '#000000',
            background: '#000000',
            border:  '#000000',
            highlight: {
                border: '#2B7CE9',
                background: '#D2E5FF'
            }
        }
    }
}
network.setOptions(options);

I have been round and round trying different ways of doing this. If I remove the "id: nodeID," parameter from the above options I would expect all the nodes to be updated, however none are.

I am using standard id's for my nodes: 595191aa-98c6-4a4b-a0e0-4262df83e0de

Any ideas?

Thank you in advance.

• javascript
• jquery
• vis.js

1 Answer 1

For the Network, I believe colors are handled such that you can specify default color properties via the Network options, but if you also provide color properties for individual nodes in that network, those node-specific color properties will always override any defaults you set.

So that's why this isn't working for you -- on click events you're attempting to change the Network default color properties, but those changes will always be ignored due to your nodes having their own color superseding properties.

Take a look at http://jsfiddle/9knw26nc/1/

  var nodeID = params['nodes']['0'];
  if (nodeID) {
    var clickedNode = nodes.get(nodeID);
    clickedNode.color = {
      border: '#000000',
      background: '#000000',
      highlight: {
        border: '#2B7CE9',
        background: '#D2E5FF'
      }
    }
    nodes.update(clickedNode);
  }

Just simplified your example, but I'm changing the node color properties directly for the clicked node by updating the DataSet to reflect that.