单击节点时如何更改vis.js中的节点图像？

问题描述

我正在尝试在点击灰色节点时复制 vis.js 库中的脚本，它成功了，但这实际上是针对 shape 类型的。但我的情况是我使用 image 类型。发生的事情是图像没有改变。如何为我的案例实现以下代码（使用图像）。

假设我有 2 张图像（Image_A 和 Image_B），Image_A 是默认的彩色图像，Image_B 是灰色图像。所以当点击特定节点时，该节点将使用Image_A，其他为Image_B。当点击外部所有节点将使用 Image_A。

仅示例：

源链接：Grey out other node

var network;
var allNodes;
var highlightActive = false;
var nodes;

function redrawAll() {
    var allNodes = [{
        id: 1,label: "Node A_1",image: "https://www.freeiconspng.com/uploads/letter-a-icon-4.png"
    },{
        id: 2,label: "Node A_2",{
        id: 3,label: "Node B_1",image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
    },{
        id: 4,label: "Node B_2",];
    // Create edge data array
    var allEdges = [
        { id: "1_2",from: 1,to: 2 },{ id: "2_3",from: 2,to: 3 },{ id: "2_4",to: 4 },{ id: "4_1",from: 4,to: 1 }
    ]
    var container = document.getElementById('mynetwork');
    var nodes = new vis.DataSet(allNodes);
    var edges = new vis.DataSet(allEdges);
    var data = { nodes: nodes,edges: edges };
    var options = {};
    network = new vis.Network(container,data,options);

    // get a JSON object
    allNodes = nodes.get({ returnType: "Object" });
    network.on("click",neighbourhoodHighlight);
}

function neighbourhoodHighlight(params) {
    // if something is selected:
    if (params.nodes.length > 0) {
        highlightActive = true;
        var i,j;
        var selectednode = params.nodes[0];
        var degrees = 2;
  
        // mark all nodes as hard to read.
        for (var nodeId in allNodes) {
            allNodes[nodeId].color = "rgba(200,200,0.5)";
            if (allNodes[nodeId].hiddenLabel === undefined) {
                allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
                allNodes[nodeId].label = undefined;
            }
        }
        var connectednodes = network.getConnectednodes(selectednode);
        var allConnectednodes = [];
    
        // get the second degree nodes
        for (i = 1; i < degrees; i++) {
            for (j = 0; j < connectednodes.length; j++) {
                allConnectednodes = allConnectednodes.concat(network.getConnectednodes(connectednodes[j]));
            }
        }
  
        // all second degree nodes get a different color and their label back
        for (i = 0; i < allConnectednodes.length; i++) {
            allNodes[allConnectednodes[i]].color = "rgba(150,150,0.75)";
            if (allNodes[allConnectednodes[i]].hiddenLabel !== undefined) {
                allNodes[allConnectednodes[i]].label = allNodes[allConnectednodes[i]].hiddenLabel;
                allNodes[allConnectednodes[i]].hiddenLabel = undefined;
            }
        }
    
        // all first degree nodes get their own color and their label back
        for (i = 0; i < connectednodes.length; i++) {
            allNodes[connectednodes[i]].color = undefined;
            if (allNodes[connectednodes[i]].hiddenLabel !== undefined) {
                allNodes[connectednodes[i]].label = allNodes[connectednodes[i]].hiddenLabel;
                allNodes[connectednodes[i]].hiddenLabel = undefined;
            }
        }
    
        // the main node gets its own color and its label back.
        allNodes[selectednode].color = undefined;
        if (allNodes[selectednode].hiddenLabel !== undefined) {
            allNodes[selectednode].label = allNodes[selectednode].hiddenLabel;
            allNodes[selectednode].hiddenLabel = undefined;
        }
    }
    else if (highlightActive === true) {
        // reset all nodes
        for (var nodeId in allNodes) {
            allNodes[nodeId].color = undefined;
            if (allNodes[nodeId].hiddenLabel !== undefined) {
                allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
                allNodes[nodeId].hiddenLabel = undefined;
            }
        }
        highlightActive = false;
    }
  
    // transform the object into an array
    var updateArray = [];
    for (nodeId in allNodes) {
        if (allNodes.hasOwnProperty(nodeId)) {
            updateArray.push(allNodes[nodeId]);
        }
    }
    nodes.update(updateArray);
}

redrawAll();

解决方法

您需要使用 shape :"image" 将节点显示为图像。然后，为了使图像模糊，我使用 opacity 而不是 color 。因此，每当您需要模糊其他图像时，对所有其他节点使用相同的 allNodes[nodeId].opacity = any value。

演示代码：

var network;
var allNodes;
var highlightActive = false;
var nodes;

function redrawAll() {
  allNodes = [{
    id: 1,label: "Node A_1",shape: "image",//added shape..to show image.. in nodes..
    image: "https://www.freeiconspng.com/uploads/letter-a-icon-4.png"
  },{
    id: 2,label: "Node A_2",image: "https://www.freeiconspng.com/uploads/letter-a-icon-4.png"
  },{
    id: 3,label: "Node B_1",image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
  },{
    id: 4,label: "Node B_2",];
  // Create edge data array
  allEdges = [{
      id: "1_2",from: 1,to: 2
    },{
      id: "2_3",from: 2,to: 3
    },{
      id: "1_3",{
      id: "4_1",from: 4,to: 1
    }
  ]
  var container = document.getElementById('mynetwork');
  nodes = new vis.DataSet(allNodes);
  var edges = new vis.DataSet(allEdges);
  var data = {
    nodes: nodes,edges: edges
  };
  //just added some styles..
  var options = {
    edges: {
      color: {
        color: '#CCC',highlight: '#A22'
      },width: 3,length: 275,hoverWidth: .05
    }
  };
  network = new vis.Network(container,data,options);

  //get a JSON object
  allNodes = nodes.get({
    returnType: "Object"
  });
  network.on("click",neighbourhoodHighlight);
}

function neighbourhoodHighlight(params) {
  // if something is selected:
  if (params.nodes.length > 0) {
    highlightActive = true;
    var i,j;
    var selectedNode = params.nodes[0];
    var degrees = 2;

    // mark all nodes as hard to read.
    for (var nodeId in allNodes) {
      allNodes[nodeId].opacity = 0.2; //change to opacity..
      if (allNodes[nodeId].hiddenLabel === undefined) {
        allNodes[nodeId].hiddenLabel = allNodes[nodeId].label;
        allNodes[nodeId].label = undefined;
      }
    }
    var connectedNodes = network.getConnectedNodes(selectedNode);
    var allConnectedNodes = [];

    // get the second degree nodes
    for (i = 1; i < degrees; i++) {
      for (j = 0; j < connectedNodes.length; j++) {
        allConnectedNodes = allConnectedNodes.concat(network.getConnectedNodes(connectedNodes[j]));
      }
    }
    // all second degree nodes get a different opacity and their label back
    for (i = 0; i < allConnectedNodes.length; i++) {
      allNodes[allConnectedNodes[i]].opacity = 0.10
      if (allNodes[allConnectedNodes[i]].hiddenLabel !== undefined) {
        allNodes[allConnectedNodes[i]].label = allNodes[allConnectedNodes[i]].hiddenLabel;
        allNodes[allConnectedNodes[i]].hiddenLabel = undefined;
      }
    }

    // all first degree nodes get their own opacity and their label back
    for (i = 0; i < connectedNodes.length; i++) {
      allNodes[connectedNodes[i]].opacity = undefined;
      if (allNodes[connectedNodes[i]].hiddenLabel !== undefined) {
        allNodes[connectedNodes[i]].label = allNodes[connectedNodes[i]].hiddenLabel;
        allNodes[connectedNodes[i]].hiddenLabel = undefined;
      }
    }

    // the main node gets its own opacity and its label back.
    allNodes[selectedNode].opacity = undefined;
    if (allNodes[selectedNode].hiddenLabel !== undefined) {
      allNodes[selectedNode].label = allNodes[selectedNode].hiddenLabel;
      allNodes[selectedNode].hiddenLabel = undefined;
    }
  } else if (highlightActive === true) {
    // reset all nodes
    for (var nodeId in allNodes) {
      allNodes[nodeId].opacity = undefined;
      if (allNodes[nodeId].hiddenLabel !== undefined) {
        allNodes[nodeId].label = allNodes[nodeId].hiddenLabel;
        allNodes[nodeId].hiddenLabel = undefined;
      }
    }
    highlightActive = false;
  }

  // transform the object into an array
  var updateArray = [];
  for (nodeId in allNodes) {
    if (allNodes.hasOwnProperty(nodeId)) {
      updateArray.push(allNodes[nodeId]);
    }
  }
  nodes.update(updateArray);
}

redrawAll();

#mynetwork {
  width: 500px;
  height: 500px;
  border: 1px solid lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>

<div id="mynetwork"></div>