vis.js change node color also affect edge color

Question

I used this function to change the node color from it's id however i found that the edge that start with that node also change color

example

If i changed node 2 to red

edge 8,7,6 that is connect from: 2, to: 1,4,5 also changed to red

function draw() {
        nodes.add([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
        ]);
        edges.add([
        {id:9, from: 3, to: 1},
        {id:8, from: 2, to: 1},
        {id:7, from: 2, to: 4},
        {id:6, from: 2, to: 5}
        ]);

Here is my code:

network.on( 'click', function(params) {
    idnode = params.nodes;
    idedge = params.edges;          
});

function red() {
    idnode2 = idnode;
    nodes.update({id: idnode2, color: "red"});
}

Answer 1

My understanding is that this is exactly how vis.js works: the edge color by default is the color of the (border of) the origin node (you could of course change it, just like you did with the node).
For details on this, see the documentation for the option: color.inherit in http://visjs.org/docs/network/edges.html

Answer 2

We need to disable the inherit property in the global options , like :

var options = {
    nodes: {
        shape: 'dot',
        scaling: {
            customScalingFunction: function (min,max,total,value) {
                return value/total;
            },
            min:20,
            max:100
        }
    }
    ,
    edges:{
        scaling: {
            customScalingFunction: function (min,max,total,value) {
                return value/total;
            },
            min:1,
            max:200
        },
        color: {
            //color:'#848484',
            highlight:'#848484',
            hover: '#d3d2cd',
            inherit: false,
            opacity:1.0
        }
    }

};

And then while adding the edge , we should include the color as :

edges.add({from: 1, to: 2, value:10,color:{color:'#ff383f'}});

Or you can update the edge with color :

edges.update({id:10,color:{color:'#ff383f'}});

Answer 3

I found that if i set the edges color in options. The edge color won't change anymore.

Answer 4

Disable inherit attribute in options.edges.color.inherit :

let options = {
  edges: {
    color : {
      inherit: false
    }
  }
}