d3-3d
d3-3d copied to clipboard
Animation on 3d scatter plot
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
?
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.