enhancement: animate nodes into new position about visnetwork HOT 6 CLOSED

Hi,

We can perhaps use the moveNode method (http://visjs.org/docs/network/#methods) for move just a node. I think there is actually no way to move all nodes, with some animation.
The moveNode method is not yet in visNetwork, but it's quite simple to add this feature using a visNetworkProxy,object.

from visnetwork.

You can also try to use setData with visSetData for passing new data (in your case same data with new coordinate), and see what happened ....? This method delete all previous data.

from visnetwork.

For some dynamically change with shiny, you can now have a look to new features visUpdateNodes and visUpdateEdges. Related to #50

from visnetwork.

Hi,

I made a simple example of the use of moveNode as you suggested, see here:

https://gist.github.com/FrissAnalytics/ecf8cfc756b5fcbb8766

Basically you have an original set of x,y coordinates and a target set of x,y coordinates for each node and then you create a convex combination of the two for each node and move the node to that position. In the example I've set up a tick event every 10ms, with a total animation time of 500ms. In the loop I compute what lambda (l) in the convex combination should be at a given iteration (k).

In the example all nodes start at 0,0, and then move into the position as computed by the force layout. Obviously it's just a toy example.

It sort of works, but my javascript code skill is very limited so for something useful a better implementation can be made for sure. Also, in the example there is no easing function. I don't know if this approach makes sense, but I think it can be made to work.

Obviously I would be nicer if the guys from vis.js made a function like this, but certainly for your extension to include layouts from iGraph a transition from one layout to another would be very cool.

Do you see a better way?

kind regards, Herman

from visnetwork.

fyi: I send a request to the vis.js authors to add an options to the moveNode method:

almende/vis#1703

from visnetwork.

Hey I made this function, for animating Nodes using requestAnimationFrame instead of setTimeout.

function moveNodeAnim(nodeId, finX, finY, duration) {
            let startPos = network.getPositions([nodeId])[nodeId];
            let startX = startPos.x;
            let startY = startPos.y;
            let startTime = performance.now();
            let _duration = duration || 1000;

            let move = (function () {
                let time = performance.now();
                let deltaTime = (time - startTime) / _duration;
                let currentX = startX + ((finX - startX) * deltaTime);
                let currentY = startY + ((finY - startY) * deltaTime);

                if (deltaTime >= 1) {
                    network.moveNode(nodeId, finX, finY);
                } else
                {
                    network.moveNode(nodeId, currentX, currentY);
                    window.requestAnimationFrame(move);
                }
            });

            move();

        }

from visnetwork.