如何在 d3.transition 期间正确访问 SVG 元素的转换 [重复]

Question

我正在使用 d3.transitions 处理 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属性而不是transform，这使得这种定位方式的管理更加复杂。见这里：

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

这里的值是正确的，但需要附加属性ON EACH ELEMENT！

因此，我认为这不是一个合适的解决方案...

解决此问题的标准 d3 方法是什么？ 有没有办法在不需要额外的属性/数据结构的情况下访问元素的最终转换状态？我不想不必要地用垃圾填充 DOM。

关于如何以一种好的方式做到这一点的任何想法？

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

Answer 1

可以将transition.end event listener 添加到代码中，并提供转换结束时的值。

在下面的 sn-p 中演示。

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

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

t.on('end', function() {
    console.log(circle.attr('transform'))
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="800" height="600" viewbox = "0 0 1000 1000">
  <circle id ="circleid" cx ="20" cy="20" r="15" fill="blue"></circle>
</svg>