d3-3d icon indicating copy to clipboard operation
d3-3d copied to clipboard

Animation on 3d scatter plot

Open mapmeld opened this issue 6 years ago • 1 comments

Hi, I'm using this library and it is doing wonders for us. Currently I am able to show two states on our 3D scatter plot by showing and hiding two separate collections of dots, something like this:

dots1.push({x: x1, y: y1, z: z1});
dots2.push({x: x2, y: y2, z: z2});

...
function dragged(){
        ...
        var data = [
           grid3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(xGrid),
           point3d.rotateY(beta + startAngle).rotateX(alpha - startAngle)(mode ? dots1 : dots2)
       ];
       processData(data, 0);
}
toggle.onClick = dragged;

I would like to animate dots moving between the two states.

As I understand it, d3-3d calculates d.projected.x and d.projected.y for all of the data, and then cx and cy are set to draw as if it's in 3d space.

To draw cx and cy during a transition, I'd like to access x2,y2,x2, either as d.projected.x2, or projected(d.x2). Is there a clean way like this, without maintaining both sets and checking the others' calculated position, with something like dots2.filter((d2)=> { d2.id === d.id })[0].projected.x ?

mapmeld avatar Sep 10 '18 18:09 mapmeld

Do you use d3.js to handle your animations?

Please take a look at the examples how animations are normally managed with d3-3d.js and d3.js.

Niekes avatar Jan 15 '24 16:01 Niekes