Issue
AS in the title, I'm using "vis": "^4.21.0-EOL" in the dependencies, and "@types/vis": "^4.21.24". Everything works well, aside editing/changing certain things, like changing color of existing nodes
node.color.background = '#0BB176'
I get an error saying that background doesn't exist.
Solution
Default Color
A default background color for nodes can be set in the network options, such as:
let options = {
nodes: {
color: {
background: '#EA738DFF'
}
}
};
Individual Nodes
Individual nodes then then override this with their own colors, such as:
let nodes = new vis.DataSet([
// Apply a specific background color to node 1
{ id: 1, label: "Node 1", color:{background: '#C5FAD5'}},
// Apply no color to node 2, so it will use the default color
{ id: 2, label: "Node 2" },
]);
Updating Individual Nodes
If you've already got a nodes DataSet defined and you'd like to update the color of an existing node, then you'll need to use the DataSet update
method. More detail on this method can be found in the documentation here.
For example to update node 1 to a new background color you could call update like:
nodes.update({id: 1, color:{background: '#FCE77D'}});
As described in the documentation the provided properties are merged into the current properties, so there is no need to provide the full object with all properties (e.g. label is kept even though it's not provided).
Vis.js Version
Please note the vis.js package mentioned in the question is deprecated as per https://www.npmjs.com/package/vis. They suggest moving to the new package https://www.npmjs.com/package/vis-network. This functionality works the same for both packages, however the newer version has extra methods such as updateOnly
which is sometimes more suitable as described here.
Example
Code snippet below, using the depreciated vis.js package, click the button to update an exisitng node:
// create an array with nodes
let nodes = new vis.DataSet([
// Background Color
// Override default with specific color for some nodes
// Any without a background color set will use the default from options
{ id: 1, label: "Node 1", color:{background: '#C5FAD5'}},
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4", color:{background: '#C5FAD5'}},
{ id: 5, label: "Node 5" },
]);
// create an array with edges
let edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);
// create a network
const container = document.getElementById("mynetwork");
const data = {
nodes: nodes,
edges: edges,
};
// Background Color
// Set default background color in options
let options = {
nodes: {
color: {
background: '#EA738DFF'
}
}
};
const network = new vis.Network(container, data, options);
// Setup a button for demo purposes
const btn = document.getElementById("mybutton");
btn.addEventListener('click', function(e){
nodes.update({id: 1, color:{background: '#FCE77D'}});
});
#mynetwork {
width: 600px;
height: 140px;
border: 1px solid lightgray;
}
<!-- Current Version of vis-network -->
<!-- <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script> -->
<!-- Depreciated version of vis -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<button id="mybutton">Change Node 1 Color</button>
<div id="mynetwork"></div>
Answered By - Chris C
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.