vis.js 改变节点颜色也会影响边颜色

Question

我使用这个函数从它的 id 更改节点颜色但是我发现以该节点开始的边缘也会改变颜色

例子

如果我将节点 2 更改为红色

从 2 连接到 1、4、5 的边 8、7、6 也变为红色

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}
        ]);

这是我的代码：

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

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

Answer 1

我的理解是，这正是 vis.js 的工作原理：默认情况下，边缘颜色是原始节点（的边界）的颜色（您当然可以更改它，就像您对节点）。
有关详细信息，请参阅选项的文档：color.inherit in http://visjs.org/docs/network/edges.html

Answer 2

我发现如果我在选项中设置边缘颜色。边缘颜色不会再改变。

Answer 3

我们需要在全局选项中禁用继承属性，例如：

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
        }
    }

};

然后在添加边缘时，我们应该包括颜色：

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

或者您可以用颜色更新边缘：

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

Answer 4

禁用 options.edges.color.inherit 中的继承属性：

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

vis.js 改变节点颜色也会影响边颜色

vis.js change node color also affect edge color

javascript

vis.js