update node properties

[Kritika688]

Hi,

Is it possible to update node properties dynamically on Selecting a node?

In my project i have a global view consisting of close to 700 nodes, when i click on a particular node i generate a local view of the selected node and its neighbors, as and when i click the neighbors, the local view changes.

My Issue:

1. As and when i select a node from the local view, i want the selected node to reflect in the global view, basically change the selected nodes color, hence i want the properties changes dynamically (at any point the global and local view should point to the same node - colored node).
2. As my global view has a huge data set, the nodes are really not visible. It has x and y coordinates and the nodes are hardly visible even if i zoom in, how can i fix that?

JSBin (only html):
http://jsbin.com/vonowa/1

My Github Code (includes php files and csv file of data):
https://github.com/Kritika688/Visualization_Project/tree/master/Version6

I hope I could convey my issue.

Thanks & Regards
Kritika

[AlexDM0]

Hi Kritika,

What you want to do sounds a lot like our neighborhood highlight example:

http://visjs.org/examples/network/29_neighbourhood_highlight.html

You can use the vis.DataSet for dynamically updating your nodes and edges. There are examples on that specifically as well:

http://visjs.org/examples/network/16_dynamic_data.html

As for the visibility... I'm not sure. I can't get your code to run. From the php it looks like you expect a database to be there which I obviously do not have, let alone with the data you want to pull from it. You could make a version that has all the requirements so it runs without any problems (read: no PHP and include all the js and css files it needs) and I can take a look.

If nodes are not visible, make them larger. Maybe you can use the value system?

Regards,

Alex

[AlexDM0]

To append to my comment, even though you have the global and local seperated, the technique with the datasets is exactly the same. You put datasets into the local view, on click in global gather a list of nodes and edges you need to show in the local view, clear the datasets and update them with the new nodes.

Regards

[Kritika688]

Thanks Alex for your response.
I am using php and database,hence it is difficult to show you the output.
Here is a pic of what it actually looks like !

The code i need to modify is the one i shared earlier,

however I tried to hard code the dataset just to explain my problem(i dont think i was successful in displaying the nodes and edges):
http://jsbin.com/geboma/4

From the pic two things which i am finding difficult to do is:

1. When i select a node from the local view, i want to update the color of the selected node in the global view.
2. I noticed that the nodes are randomly placed in the local view each time, is there a way to display them by ID's or so? So that each time they are placed in the same position

Note: all my data is generated dynamically each time from database!

Really need some help on this. Thank you !

[AlexDM0]

Hi,

Did you look at the examples I gave you? There should be enough information in them for you to dynamically update the data. If it's not, could you ask directed questions as to why the dataset does not work for you?

As for your second point, you can give them a starting position manually. If you don't it will be random. Make sure you allow them to move if you supply a starting position.

In 4.0 it will be easier to give a random seed and get the same network each time.

Regards,

Alex

[Kritika688]

Hi Alex,

I did go through the examples you mentioned, I do not want to redraw the entire network each time like Example 27, hence i used the approach of Example 16,

added this code:

nodes.update({
id: MySelectedNode,
color: 'red'
});

However, it always catches the data set of the local view and updates it, But i have been trying to update the other data set, that is the global view. Is there a way i can choose which data set i want to update?

Also, do you have an example which specifies the start position of the nodes? how do i set that?

Thanks,
Kritika

[AlexDM0]

Hi,

For your first point, in pseudo code:

var nodesGlobal = new vis.Dataset ..... // fill with data
var edgesGlobal // same idea as nodesGlobal

var nodesLocal = new vis.Dataset .... // fill with data, keep same nodeIds as used in nodesGlobal
var edgesLocal // same idea

var dataGlobal = {nodes:nodesGlobal, edges:edgesGlobal}
var dataLocal // same idea as global

var globalNetwork = new vis.network(containerGlobal, dataGlobal, optionsGlobal)
var localNetwork = new vis.network(containerLocal, dataLocal, optionsLocal)

localNetwork.on('select', function (props) { // do stuff, get id from node that is selected
  var globalNode =  nodesGlobal.get(selectedNodeId);
  globalNode.color = 'red';
  nodesGlobal.update(globalNode);
}

Simply put, if you want to update the global data, update the global data.

As for the second point:
http://visjs.org/docs/network.html#Nodes

example:

{id:1,x:1,y:2,allowedToMoveX:true,allowedToMoveY:true}

In example 27, we only update all nodes because our effect is on all nodes. You can just do a subset.

Take a look at the docs of the dataset.
http://visjs.org/docs/dataset.html

Due to the nature of the network, you will redraw it in full anyway but I think update was the word you were looking for.

Regards,

Alex

[Kritika688]

do i need to define any function? From the code above,

var globalNode = nodesGlobal.get(selectednodeLocal);
globalNode.color = 'red';
nodesGlobal.update(globalNode);

While trying to update the node I get the following error:
"TypeError: nodesGlobal.get is not a function"

Thank you so much for the help :) you are doing a great job!

[AlexDM0]

It's pseudo code.. naturally it doenst work out of the box. I think you have messed up your scoping though without any code I can only guess.

The variable you want does not exist where you are using it. The examples and the docs should tell you all you need to know.

http://visjs.org/docs/dataset.html#Methods

get definitely is a function of the dataset.

Regards

[Kritika688]

Thanks, I could get it working !

[AlexDM0]

Glad it worked out :) have fun using vis!

[Kritika688]

Hi Alex,

1. I am trying to display only the nodes using its x,y coordinates, and without the edges. However i noticed the graph does not show up. Is it possible to just display the nodes?
   I am using dataset.
2. I have my global view in one
   and my local view in another, with your help i could fix the issue of updating the node color in global view by clicking on a node from local view. I see the update in my console, however unless i click on the global view div, the color change does not show up. But once i click on it, the change is noticeable. (the update happens, but it does not automatically show up!).
   I tried autoclick function, but it does not work. Am i missing out on something?

http://jsbin.com/cehayo/1

Thank You !
And sorry to bother.

Thanks again,
Kritika

[AlexDM0]

Hi,

Without a working code example I cannot help you any further.

There is no way for me to debug if the code I have to work with does not work.

Are there errors in your console? Turn stabilization off in local to see what happens. Also you can manually redraw global using the redraw function but it should do that after the update.

Regards