Get static node position

[Kritika688]

Hi Alex,

I managed to get a working sample code of what I am doing (to get a rough idea).
http://jsfiddle.net/kritika688/m2f0hr59/1/

I have the x and y axis for my global nodes, when i click on the local nodes, each time my node position changes. I am trying to get the same node position any number of time i refresh. I want my local nodes always fixed. In this example i have hardcoded the local nodes, however in the actual project the local network keeps changing.

I tried focusOnNode option keeping the same x and y coordinates, however i could not get that working.
storePositions options would not work for me as i already have the x and y coordinates already assigned. Is there any way i can always get nodes sorted by ID numer?

I would be grateful if you could help me regarding the same.

Thanks,
Kritika

[AlexDM0]

Hi Kritika,

here: http://jsfiddle.net/m2f0hr59/6/

For this example I did not need the entire thing. I have a few questions for you.

1. why won't you just use the x,y coordinates from the global view?
2. why would you use focus on, the example on our website and docs tell you its something completely different.
3. the physics simulation is deterministic, that means, same starting positions means same ending positions. All you need is to give it a starting position, why is taht a problem?
4. sorting is just javascript, is that not what you ment?

Regards,

Alex

[Kritika688]

Thanks Alex, your code helped me fix my position issue!

One LAST question,
The first time i click a node from global view, i get the static position of the local view (the nodes do not randomly move then take its x and y position).
However, when i consecutively click nodes on my local view, the nodes do take their position, but then it moves around first.

Below is the option i set:
var optionsLocal ={
smoothCurves: {dynamic:false, type: "continuous"},
stabilize: true
};

Why does the same options not apply when i am just updating the new data set each time to the same local network.
I tried networkLocal.setOptions(optionsLocal );
But that does not help. I cannot create a new network, i just need to update the existing one.

THANKS !
Kritika

[AlexDM0]

Hi,

It'd be really helpful if you could show this. I assume you're using the dataset.clear followed by the dataset.add method to change the nodes in your local view? Try doing a setData instead. Stabilization does not start when updating the dataset because you'd freeze the network on every small update. In 4.0 you can manually call stabilize but it's not out yet.

Nothing is stopping you from calling the destroy method on the network and creating a new one but it's a little sloppy.

Regards

[Kritika688]

You are right, I am using dataset.clear and add. Even if i try to manually set options it does not seem to work when I dynamically want to change the same network each time. Its tough for me to show as my graph is updated each time from the database, however now i just plan to leave it this way as it stabilizes eventually.

I also noticed another issue, though i manually set radius/value for a large set of nodes, the nodes are invisible. I am not sure if it is the graph size/dataset/my options which is not bringing up the nodes.
http://jsfiddle.net/kritika688/m2f0hr59/8/

Thanks
Kritika

[AlexDM0]

Hi

Let me restate what I said:
you can use setData to load the data in the local network to have it stabilize.

The nodes are not invisible. You did not supply the right data so it crashes and does not draw (or does not know where to draw). Print your obj variable. The first node looks like this:

id: "1"
label: "1"
title: "Abdelmoumene Djabou"
value: "20"
x: "-1392.5499"
y: "1124.1614"

Our docs say:
http://visjs.org/docs/network.html#Nodes
value, x and y are supposed to be numbers.

To fix:

for (var nodeId in obj.nodes) {
        obj.nodes[nodeId].x = parseInt(obj.nodes[nodeId].x);
        obj.nodes[nodeId].y = parseInt(obj.nodes[nodeId].y);
        obj.nodes[nodeId].value = parseInt(obj.nodes[nodeId].value);
    }

Now lets look at the options.

var optionsGlobal = {
    barnesHut: {enabled: false, repulsion: {nodeDistance: 300}, centralGravity: 0, springConstant: 0},
    smoothCurves: {dynamic:false, type: "continuous"},
    //clustering: true,
    stabilize: false,

    nodes: {
        color: {
            background: "#89C7DB",
            border: "#3BA1C3",
            highlight: {
                background: 'red',
                border: 'red'
            }
        },
        shape: 'dot',
        radiusMin: 10,
        radiusMax: 30,
        radius:15
    },
    edges: {
        color: "#30829C"
    }
};

First, I assume you want to use static smooth edges, but you turn off dynamic. This will make is much much more computationally intensive. Secondly,

barnesHut: {enabled: false, repulsion: {nodeDistance: 300}, centralGravity: 0, springConstant: 0},

should be:

physics: {
  barnesHut: {enabled: false}, 
  repulsion: {nodeDistance: 300, centralGravity: 0, springConstant: 0}
},

I assume you were trying to use repulsion because of the error in the console window saying that there is a recursion problem in barnesHut (because all the coordinates are strings). I'd recommend: dont use repulsion for this big a dataset. It's slow.

Please pay close attention to the documentation, a lot of these issues could have been avoided.

Regards,

Alex

[Kritika688]

THANK YOU SO MUCH !
I shall explore more!