问题描述
我想在节点被选中时更改它们的外观。我可以更改节点和边框的颜色,但我也想更改文本的颜色。是我遗漏了什么还是一个增强请求?
解决方法
改编自与设置选定节点大小相关的 answer:
var nodes = new vis.DataSet([
{id: 1,label: 'Node 1'},{id: 2,label: 'Node 2'},{id: 4,label: 'Node 4'},{id: 5,label: 'Node 5'}
]);
var edges = new vis.DataSet([
{from: 1,to: 2},{from: 2,to: 4},to: 5}
]);
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,edges: edges
};
var options = {
interaction: { hover:true },nodes: { font: { size: 14,color: "#000" }}
};
var network = new vis.Network(container,data,options);
network.on("selectNode",function (params) {
var selectedNodeId = params.nodes[0];
var node = network.body.nodes[selectedNodeId];
node.setOptions({
font: {
size: 20,color: "#ff0000"
}
});
});
network.on("deselectNode",function (params) {
var deselectedNodeId = params.previousSelection.nodes[0];
var node = network.body.nodes[deselectedNodeId];
node.setOptions({
font: {
size: options.nodes.font.size,color: options.nodes.font.color
}
});
});
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid lightgray;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.min.css" rel="stylesheet" type="text/css"/>
<div id="mynetwork"></div>