vis.js setOptions更改网络节点上的颜色 [英] vis.js setOptions to change color on network node

问题描述

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

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

}

这非常好用，我可以显示我的网络:

var data = {
    nodes: nodes,
    edges: edges

};

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

当节点单击时，我使用事件处理程序执行操作，我解析单击的节点的ID(这是简写版本):

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

我一直在尝试各种不同的方法.如果我从上述选项中删除了"id: nodeID,"参数，我希望所有节点都将被更新，但是没有一个节点会被更新.

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.

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

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

有什么想法吗?

谢谢.

推荐答案

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

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.

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

只是简化了您的示例，但我通过更新数据集以反映该点来直接更改所单击节点的节点颜色属性.

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

这篇关于vis.js setOptions更改网络节点上的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！