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')

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

希望我给你的任何东西都能帮助你解决问题。祝你好运！

Answer 2

转换使用以下简化代码：

HTML：

  <svg height='500' width='500'>
        <circle id='circ' cx='50' cy='50' r='10'></circle>   
    </svg>

JS：

var d3target = d3.select('#circ');

d3target
  .transition()
  .attr('cx', 100 )
  .attr('cy', 100 )

fiddle

这意味着代码中还有其他内容可以阻止您的工作转换。在链接到您的代码之后，据我所知，这是您进行转换的地方：

 if(this.parentMeasureModel.get('timesRecorded') !== 0) {
    d3target
      .attr('cx', newCX )
      .attr('cy', newCY )

    setTimeout(function(){
      d3target
        .attr('cx', originalCX )
        .attr('cy', originalCY )
    }, dur);
  // Otherwise we use the standard method
  } else {      
    d3target.transition()
      .attr('cx', newCX )
      .attr('cy', newCY )
      .duration(dur)
      .each('end',function() {                   // as seen above
        d3.select(this).                         // this is the object 
          transition()                           // a new transition!
            .attr('cx', originalCX )    // we could have had another
            .attr('cy', originalCY )    // we could have had another
            .duration(dur);                  // .each("end" construct here.
       });
  }
}

两者之间的差异是dur变量和每种方法。尝试使用dur变量的实际值并删除每个方法。如果它有效，那么你的问题就在那里。

当d3.attr（＆＃39; x＆＃39;，y）执行时，d3.transition（）。attr（＆＃39; x＆＃39;，y）不起作用

2 个答案: