Question

我使用此函数更改节点颜色，但是我发现以该节点开头的边缘也会改变颜色

示例

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

边缘8,7,6连接从：2，到：1,4,5也变为红色

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的工作方式：默认情况下，边缘颜色是原始节点（边界）的颜色（当然，您可以更改它，就像您对节点所做的那样）。
有关详细信息，请参阅http://visjs.org/docs/network/edges.html

中选项的文档：color.inherit

Answer 2

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

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 3

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

Answer 4

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

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

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

4 个答案: