Javascript 如何在d3.0转换期间正确访问SVG元素的转换

我正在使用d3动画，例如圆

让我们假设具有以下圆形动画d3.transition：

animationTime = 500;
svg = d3.select('#svg');                      // Select the SVG by its id previously added to the DOM
circle = d3.select('#circleid')               // Select a circle by its id from the SVG
           .transform('translate(0,0)');      // Set position of that circle to origin

circle.transition().duration(animationTime)   // Start an animation with transition time of 0.5 sec
      .transform('translate(500,500)');       // Animate position of circle to new position (500, 500)

console.log(circle.attr('transform'));    // --> Output: 'translate(50,50)'
setTimeout(() => { 
   console.log(circle.attr('transform')); // --> Output: 'translate(500,500)'
}, animationTime + 50);                   // without +50 the animation is not completely finished, yet

我目前的解决方案是引入一个映射或元素属性来保存最终位置并访问该SVGElement属性，而不是转换，这使得这种定位方式的管理更加复杂。请看这里：

animationTime = 500;
svg = d3.select('#svg');                      
circle = d3.select('#circleid')               
           .transform('translate(0,0)');      

circle.attr('final-x', 500).attr('final-y', 500)   // Save final position as separate attribute
      .transition().duration(animationTime)   
      .transform('translate(500,500)');       

console.log(circle.attr('final-x'), circle.attr('final-y'));  // Output --> 500 500

这里的值是正确的，但每个元素都需要附加属性

因此，我不认为这是一个正确的解决方案…

如何解决这个问题的标准d3方法是什么？ 有没有一种方法可以访问元素的最终转换状态，而不需要额外的属性/数据结构？我不想不必要地用垃圾填充DOM

有没有什么好办法

编辑：我不能使用转换的.end函数，因为我已经需要在转换完成之前访问转换。

A可以添加到代码中，并将提供转换结束时的值

在下面的代码片段中演示

动画时间=500； circle=d3。选择'circleid'//从SVG中通过其id选择一个圆 .attr'transform'，'translate0,0'；//将该圆的位置设置为原点 让t=circle.transition.durationanimationTime//以0.5秒的过渡时间开始动画 .attr'transform'，'translate500500'//将圆的位置设置为新位置500500 t、 关于“结束”，函数{ console.logcircle.attr'transform' }

---

Thx对于提示，问题是，我需要在转换完成之前访问位置，否则，end函数就足够了，这是真的。我忘了在问题中提到这一点好的，那么请更新问题以包含一个。否则，我们将提出的解决方案可能与您的情况不匹配。是否回答了您的问题？请在代码示例中演示如何管理多个元素。@kaido这正是我要寻找的！非常感谢。没有必要有多个元素，因为问题只存在于一个圆中。我不认为有必要解释为什么我需要这个？我想这可能会太冗长了。