javascript - d3.transition().attr ('x' , y) 在 d3.attr ('x' , y) 有效时无效

Question

以下作品(圆圈将移动到提供的点的新位置)

d3target
  .attr('cx', newCX )
  .attr('cy', newCY )

但这些不是:

d3target
  .transition()
  .attr('cx', newCX )
  .attr('cy', newCY )
   // .duration(1000) // Still doesn't work with or without the duration

这也不行:(通过提供起始值 as suggested by API docs )

d3target
  .attr('cx', originalCX )
  .attr('cy', originalCY )
  .transition()
  .attr('cx', newCX )
  .attr('cy', newCY )
   // .duration(1000) // Still doesn't work with or without the duration

圆圈没有动画，也根本没有移动。我们尝试手动将 dur 设置为 1 秒，以确保动画不会结束或跳过，因为它太小而无法被注意到或跳过等等。

我们已经尝试并研究了很多关于原因的可能性，因此非常感谢任何关于原因或尝试其他尝试的想法。

引用基本信息:
d3Target 如下所示，我们所知道的是正确的，因为第一个代码块通过直接调整 attr 而无需 transition() 调用。

Answer 1

首先将转换(转换方法的返回)分配给一个变量，然后尝试 console.log(transition_selection.empty())。如果它是假的，那么你就知道你有一些东西要过渡。

第二次尝试:transition_selection.each('start', function(){ console.log('started'); }).each('interrupt', function() {console.log('interrupted' );}).each('end', function(){ console.log('ended'); });

这样您就可以查看转换是否已开始和是否被中断。

第三次尝试:transition.attr('cx', function (d) { console.log( 'attr got assigned'); ) });

这样您就可以知道您为“cx”提供的值是否已被读取。

实际上在同一次运行中尝试以上所有方法。这样您就可以看到按什么顺序发生了什么。

始终尝试为您的过渡命名。 d3traget.transition('somename')

这样您就可以在同一选择上并行运行多个转换。如果您在同一选择上运行多个“未命名”转换，则第二个转换将停止第一个转换。

希望我提供给您的任何内容都能帮助您解决问题。祝你好运!