Mixing
Vis.js network not refreshing upon change
0
I'm using the vis.js library to generate a network diagram and I'm having difficulties getting the graph to update. It's a fairly simple diagram, but I'm trying to add functionality where the all nodes gray-out except for the clicked node when someone clicks.
This thread describes the question in more detail, but the answer doesn't show code to help.
Please note that I already checked out these threads:
This one didn't help me since it's heavily focused on angularjs
and I'm using vanilla javascript. This one explains how to gray
out the nodes, but it doesn't give
details on how to refresh the graph.
Here is a simplified version of my code:
var raw_edges = new vis.DataSet();
var raw_nodes = new vis.DataSet();
//Get the data from external API.
var getEdges = new Promise(function(resolve, reject) {
... // Details removed here for brevity sake
resolve(raw_edges);
});
var getNodes = new Promise(function(resolve, reject) {
...
resolve(raw_nodes);
});
// Put it all together
Promise.all([getEdges,getNodes]).then(function() {
//Add additional properties to each node
raw_nodes.map(function(node) {
// Add label - Same value as the Datasource Name, which is the ID field
node.label = node.id;
node.title = node.id;
node.shadow = false;
node.shape = 'dot';
node.group = node.data_type;
node.borderWidth = 0.5;
var cleaned_node_name = (node.id).replace(" ", "_");
node.size = (5 + totalSize[cleaned_node_name])*3 || 0;
return raw_nodes;
});
raw_edges.map(function(edge) {
edge.color = '#BBBBBB';
edge.arrows = 'middle';
edge.smooth = true;
edge.shadow = false;
return raw_edges;
});
var active_nodes = raw_nodes.filter(function(node) {
return node.size > 0;
});
// access network container
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: active_nodes,
edges: raw_edges
};
console.log('data is ', data);
//Set options
var options = {
width: "1024px",
height: "768px",
layout: {
randomSeed: 5003,
improvedLayout: true
},
interaction: {
selectConnectedEdges: true
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
// listen for a click
network.on('click', function(d) {
console.log('Clicked!', d );
// loop through the data module and find active node. For all non-selected nodes, change the color to #d3d3d3.
for (j= 0; j<data.nodes.length; j++) {
if(data.nodes[j].id == d.nodes[0]) {
console.log('active node found; no action');
} else {
data.nodes[j].color = '#d3d3d3'
console.log('updated color for node ', data.nodes[j])
}
}
// This doesn't throw an error, but the graph doesn't reload
network.redraw();
});
});
After I click on a node, I can see in the console that everything works and the node object gets updated with the #d3d3d3 color. However, this isn't getting reflected in the graph.
What am I doing wrong here?
javascript graph vis.js vis.js-network
asked Jan 1 at 18:44
S.S.S.S.
196110
add a comment |
0
I'm using the vis.js library to generate a network diagram and I'm having difficulties getting the graph to update. It's a fairly simple diagram, but I'm trying to add functionality where the all nodes gray-out except for the clicked node when someone clicks.
This thread describes the question in more detail, but the answer doesn't show code to help.
Please note that I already checked out these threads:
This one didn't help me since it's heavily focused on angularjs
and I'm using vanilla javascript. This one explains how to gray
out the nodes, but it doesn't give
details on how to refresh the graph.
Here is a simplified version of my code:
var raw_edges = new vis.DataSet();
var raw_nodes = new vis.DataSet();
//Get the data from external API.
var getEdges = new Promise(function(resolve, reject) {
... // Details removed here for brevity sake
resolve(raw_edges);
});
var getNodes = new Promise(function(resolve, reject) {
...
resolve(raw_nodes);
});
// Put it all together
Promise.all([getEdges,getNodes]).then(function() {
//Add additional properties to each node
raw_nodes.map(function(node) {
// Add label - Same value as the Datasource Name, which is the ID field
node.label = node.id;
node.title = node.id;
node.shadow = false;
node.shape = 'dot';
node.group = node.data_type;
node.borderWidth = 0.5;
var cleaned_node_name = (node.id).replace(" ", "_");
node.size = (5 + totalSize[cleaned_node_name])*3 || 0;
return raw_nodes;
});
raw_edges.map(function(edge) {
edge.color = '#BBBBBB';
edge.arrows = 'middle';
edge.smooth = true;
edge.shadow = false;
return raw_edges;
});
var active_nodes = raw_nodes.filter(function(node) {
return node.size > 0;
});
// access network container
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: active_nodes,
edges: raw_edges
};
console.log('data is ', data);
//Set options
var options = {
width: "1024px",
height: "768px",
layout: {
randomSeed: 5003,
improvedLayout: true
},
interaction: {
selectConnectedEdges: true
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
// listen for a click
network.on('click', function(d) {
console.log('Clicked!', d );
// loop through the data module and find active node. For all non-selected nodes, change the color to #d3d3d3.
for (j= 0; j<data.nodes.length; j++) {
if(data.nodes[j].id == d.nodes[0]) {
console.log('active node found; no action');
} else {
data.nodes[j].color = '#d3d3d3'
console.log('updated color for node ', data.nodes[j])
}
}
// This doesn't throw an error, but the graph doesn't reload
network.redraw();
});
});
After I click on a node, I can see in the console that everything works and the node object gets updated with the #d3d3d3 color. However, this isn't getting reflected in the graph.
What am I doing wrong here?
javascript graph vis.js vis.js-network
asked Jan 1 at 18:44
S.S.S.S.
196110
Is the issue still of interest? Is it reproduced if you remove the ajax loading and just create the network from JSON? (if so, could you remove that bit and provide a fiddle showing the issue? see Minimal, Complete, and Verifiable example) What does console show ford? Ford.nodes?
– YakovL
Feb 3 at 13:49
add a comment |
0
0
0
I'm using the vis.js library to generate a network diagram and I'm having difficulties getting the graph to update. It's a fairly simple diagram, but I'm trying to add functionality where the all nodes gray-out except for the clicked node when someone clicks.
This thread describes the question in more detail, but the answer doesn't show code to help.
Please note that I already checked out these threads:
This one didn't help me since it's heavily focused on angularjs
and I'm using vanilla javascript. This one explains how to gray
out the nodes, but it doesn't give
details on how to refresh the graph.
Here is a simplified version of my code:
var raw_edges = new vis.DataSet();
var raw_nodes = new vis.DataSet();
//Get the data from external API.
var getEdges = new Promise(function(resolve, reject) {
... // Details removed here for brevity sake
resolve(raw_edges);
});
var getNodes = new Promise(function(resolve, reject) {
...
resolve(raw_nodes);
});
// Put it all together
Promise.all([getEdges,getNodes]).then(function() {
//Add additional properties to each node
raw_nodes.map(function(node) {
// Add label - Same value as the Datasource Name, which is the ID field
node.label = node.id;
node.title = node.id;
node.shadow = false;
node.shape = 'dot';
node.group = node.data_type;
node.borderWidth = 0.5;
var cleaned_node_name = (node.id).replace(" ", "_");
node.size = (5 + totalSize[cleaned_node_name])*3 || 0;
return raw_nodes;
});
raw_edges.map(function(edge) {
edge.color = '#BBBBBB';
edge.arrows = 'middle';
edge.smooth = true;
edge.shadow = false;
return raw_edges;
});
var active_nodes = raw_nodes.filter(function(node) {
return node.size > 0;
});
// access network container
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: active_nodes,
edges: raw_edges
};
console.log('data is ', data);
//Set options
var options = {
width: "1024px",
height: "768px",
layout: {
randomSeed: 5003,
improvedLayout: true
},
interaction: {
selectConnectedEdges: true
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
// listen for a click
network.on('click', function(d) {
console.log('Clicked!', d );
// loop through the data module and find active node. For all non-selected nodes, change the color to #d3d3d3.
for (j= 0; j<data.nodes.length; j++) {
if(data.nodes[j].id == d.nodes[0]) {
console.log('active node found; no action');
} else {
data.nodes[j].color = '#d3d3d3'
console.log('updated color for node ', data.nodes[j])
}
}
// This doesn't throw an error, but the graph doesn't reload
network.redraw();
});
});
After I click on a node, I can see in the console that everything works and the node object gets updated with the #d3d3d3 color. However, this isn't getting reflected in the graph.
What am I doing wrong here?
javascript graph vis.js vis.js-network
asked Jan 1 at 18:44
S.S.S.S.
196110
I'm using the vis.js library to generate a network diagram and I'm having difficulties getting the graph to update. It's a fairly simple diagram, but I'm trying to add functionality where the all nodes gray-out except for the clicked node when someone clicks.
This thread describes the question in more detail, but the answer doesn't show code to help.
Please note that I already checked out these threads:
This one didn't help me since it's heavily focused on angularjs
and I'm using vanilla javascript. This one explains how to gray
out the nodes, but it doesn't give
details on how to refresh the graph.
Here is a simplified version of my code:
var raw_edges = new vis.DataSet();
var raw_nodes = new vis.DataSet();
//Get the data from external API.
var getEdges = new Promise(function(resolve, reject) {
... // Details removed here for brevity sake
resolve(raw_edges);
});
var getNodes = new Promise(function(resolve, reject) {
...
resolve(raw_nodes);
});
// Put it all together
Promise.all([getEdges,getNodes]).then(function() {
//Add additional properties to each node
raw_nodes.map(function(node) {
// Add label - Same value as the Datasource Name, which is the ID field
node.label = node.id;
node.title = node.id;
node.shadow = false;
node.shape = 'dot';
node.group = node.data_type;
node.borderWidth = 0.5;
var cleaned_node_name = (node.id).replace(" ", "_");
node.size = (5 + totalSize[cleaned_node_name])*3 || 0;
return raw_nodes;
});
raw_edges.map(function(edge) {
edge.color = '#BBBBBB';
edge.arrows = 'middle';
edge.smooth = true;
edge.shadow = false;
return raw_edges;
});
var active_nodes = raw_nodes.filter(function(node) {
return node.size > 0;
});
// access network container
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: active_nodes,
edges: raw_edges
};
console.log('data is ', data);
//Set options
var options = {
width: "1024px",
height: "768px",
layout: {
randomSeed: 5003,
improvedLayout: true
},
interaction: {
selectConnectedEdges: true
}
};
// initialize your network!
var network = new vis.Network(container, data, options);
// listen for a click
network.on('click', function(d) {
console.log('Clicked!', d );
// loop through the data module and find active node. For all non-selected nodes, change the color to #d3d3d3.
for (j= 0; j<data.nodes.length; j++) {
if(data.nodes[j].id == d.nodes[0]) {
console.log('active node found; no action');
} else {
data.nodes[j].color = '#d3d3d3'
console.log('updated color for node ', data.nodes[j])
}
}
// This doesn't throw an error, but the graph doesn't reload
network.redraw();
});
});
After I click on a node, I can see in the console that everything works and the node object gets updated with the #d3d3d3 color. However, this isn't getting reflected in the graph.
What am I doing wrong here?
javascript graph vis.js vis.js-network
javascript graph vis.js vis.js-network
asked Jan 1 at 18:44
S.S.S.S.
196110
asked Jan 1 at 18:44
S.S.S.S.
196110
edited Jan 1 at 19:33
S.S.
asked Jan 1 at 18:44
S.S.S.S.
196110
asked Jan 1 at 18:44
S.S.S.S.
196110
asked Jan 1 at 18:44
S.S.S.S.
196110
196110
Is the issue still of interest? Is it reproduced if you remove the ajax loading and just create the network from JSON? (if so, could you remove that bit and provide a fiddle showing the issue? see Minimal, Complete, and Verifiable example) What does console show ford? Ford.nodes?
– YakovL
Feb 3 at 13:49
add a comment |
Is the issue still of interest? Is it reproduced if you remove the ajax loading and just create the network from JSON? (if so, could you remove that bit and provide a fiddle showing the issue? see Minimal, Complete, and Verifiable example) What does console show ford? Ford.nodes?
– YakovL
Feb 3 at 13:49
Is the issue still of interest? Is it reproduced if you remove the ajax loading and just create the network from JSON? (if so, could you remove that bit and provide a fiddle showing the issue? see Minimal, Complete, and Verifiable example) What does console show for
d? For d.nodes?– YakovL
Feb 3 at 13:49
Is the issue still of interest? Is it reproduced if you remove the ajax loading and just create the network from JSON? (if so, could you remove that bit and provide a fiddle showing the issue? see Minimal, Complete, and Verifiable example) What does console show for
d? For d.nodes?– YakovL
Feb 3 at 13:49
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998015%2fvis-js-network-not-refreshing-upon-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998015%2fvis-js-network-not-refreshing-upon-change%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Is the issue still of interest? Is it reproduced if you remove the ajax loading and just create the network from JSON? (if so, could you remove that bit and provide a fiddle showing the issue? see Minimal, Complete, and Verifiable example) What does console show for
d? Ford.nodes?– YakovL
Feb 3 at 13:49