vis.js setOptions用于更改网络节点上的颜色

Question

我正在使用vis.js来显示网络节点.我正在从JSON解析节点数据并将其存储在数组中:

$.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++;

}

这工作完美,我可以显示我的网络:

var data = {
    nodes: nodes,
    edges: edges

};

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

我使用事件处理程序在它单击一个节点时执行操作,我解析所单击节点的ID(这是速记版本):

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

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

}

我想更新节点的颜色,我尝试了各种变化,包括以下无济于事？

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

我一直在尝试不同的方式来做这件事.如果我"id: nodeID,"从上面的选项中删除参数,我希望更新所有节点,但没有.

我正在为我的节点使用标准ID: 595191aa-98c6-4a4b-a0e0-4262df83e0de

有任何想法吗？

先感谢您.

Answer 1

对于网络,我相信颜色的处理使您可以通过网络选项指定默认颜色属性,但如果您还为该网络中的各个节点提供颜色属性,那些特定于节点的颜色属性将始终覆盖您设置的任何默认值.

这就是为什么这不适合你 - 在点击事件上你试图改变网络默认颜色属性,但由于你的节点有自己的颜色替代属性,这些更改将始终被忽略.

看看http://jsfiddle.net/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);
  }

只是简化了您的示例,但我通过更新DataSet来直接更改单击节点的节点颜色属性以反映该情况.