当d3.attr('x',y)执行时,d3.transition().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

并且也不这样做:(通过提供API文档建议的起始值)

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()调用的情况下直接调整s .

Answer 1

该转换使用以下简化代码进行：

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 )

小提琴

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

 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变量和each方法。尝试使用变量的实际值dur并删除each 方法。如果它有效，那么你的问题就在那里。