Currently, I am experimenting with d3 animations using d3.transitions specifically involving circles.
Consider the circle animation example below (d3.transition()):
animationTime = 500;
svg = d3.select('#svg'); // Locate the SVG using its previously assigned id
circle = d3.select('#circleid') // Choose a specific circle by its id within the SVG
.transform('translate(0,0)'); // Set initial position of the circle at the origin
circle.transition().duration(animationTime) // Initiate an animation lasting 0.5 seconds
.transform('translate(500,500)'); // Animate the circle to new coordinates (500, 500)
console.log(circle.attr('transform')); // --> Result: 'translate(50,50)'
setTimeout(() => {
console.log(circle.attr('transform')); // --> Result: 'translate(500,500)'
}, animationTime + 50); // Need extra time for complete animation
In my current approach, I opt to use either a map or element attributes to store the final position and access these attributes instead of the transform property, which adds complexity to managing the positioning. See below:
animationTime = 500;
svg = d3.select('#svg');
circle = d3.select('#circleid')
.transform('translate(0,0)');
circle.attr('final-x', 500).attr('final-y', 500) // Preserve final coordinates as separate attributes
.transition().duration(animationTime)
.transform('translate(500,500)');
console.log(circle.attr('final-x'), circle.attr('final-y')); // Output --> 500 500
The values are accurate in this method but it requires additional attributes ON EACH ELEMENT!
This leads me to believe that this is not the most efficient solution...
What would be the recommended d3 approach to addressing this problem? Is there a way to determine the final transform state of an element without resorting to extra attributes or data structures? I want to avoid cluttering the DOM unnecessarily.
Do you have any suggestions on how to handle this more elegantly?
Edit: It is important to note that I cannot utilize the .end() function of the transition because I need to access the transform prior to the completion of the transition.