单击节点时如何更改 vis.js 中的节点图像?
How to change node image in vis.js when node clicked?
我正在尝试在 vis.js 库中为灰色节点复制脚本,单击时它成功了,但实际上是针对 shape
类型的。但我的情况是我使用的是 image
类型。发生的是图像没有改变。如何为我的案例实现以下代码(使用图像)。
假设我有 2 张图像(Image_A 和 Image_B),Image_A 是默认彩色图像,Image_B 是灰色图像。所以当点击特定节点时,该节点将使用Image_A,其他是Image_B。当在所有节点外部单击时,将使用 Image_A.
仅示例:
来源link: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",
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",
image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
},
];
// Create edge data array
var allEdges = [
{ id: "1_2", from: 1, to: 2 },
{ id: "2_3", from: 2, to: 3 },
{ id: "2_4", from: 2, 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,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,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",
shape: "image",
image: "https://www.freeiconspng.com/uploads/letter-a-icon-4.png"
}, {
id: 3,
label: "Node B_1",
shape: "image",
image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
}, {
id: 4,
label: "Node B_2",
shape: "image",
image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
}, ];
// Create edge data array
allEdges = [{
id: "1_2",
from: 1,
to: 2
},
{
id: "2_3",
from: 2,
to: 3
},
{
id: "1_3",
from: 1,
to: 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>
我正在尝试在 vis.js 库中为灰色节点复制脚本,单击时它成功了,但实际上是针对 shape
类型的。但我的情况是我使用的是 image
类型。发生的是图像没有改变。如何为我的案例实现以下代码(使用图像)。
假设我有 2 张图像(Image_A 和 Image_B),Image_A 是默认彩色图像,Image_B 是灰色图像。所以当点击特定节点时,该节点将使用Image_A,其他是Image_B。当在所有节点外部单击时,将使用 Image_A.
仅示例:
来源link: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",
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",
image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
},
];
// Create edge data array
var allEdges = [
{ id: "1_2", from: 1, to: 2 },
{ id: "2_3", from: 2, to: 3 },
{ id: "2_4", from: 2, 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,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,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",
shape: "image",
image: "https://www.freeiconspng.com/uploads/letter-a-icon-4.png"
}, {
id: 3,
label: "Node B_1",
shape: "image",
image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
}, {
id: 4,
label: "Node B_2",
shape: "image",
image: "https://www.freeiconspng.com/uploads/letter-b-icon-png-23.png"
}, ];
// Create edge data array
allEdges = [{
id: "1_2",
from: 1,
to: 2
},
{
id: "2_3",
from: 2,
to: 3
},
{
id: "1_3",
from: 1,
to: 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>