Javascript d3.transition（）.attr（'；x'；y）在d3.attr（'；x'；y）不工作时不工作

以下工作（圆圈将移动到提供点的新位置）

但这些并不是：

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

这也不是：（通过提供起始值）

这些圆不设置动画，也不移动。我们尝试手动将

dur

设置为1秒，以确保动画没有完成或跳过，因为动画太小，无法被注意或跳过

我们已经尝试并研究了很多关于为什么的可能性，所以任何关于为什么或者尝试什么的想法都是非常感谢的

供参考的基本信息：
d3Target如下所示，我们所知道的是正确的，因为第一个代码块只需直接调整

attr

s，而无需调用

transition（）

---

转换使用以下简化代码：

html:

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

 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

变量使用实际值并删除每个方法。如果它有效，那么你的问题就在那里

首先将transition（转换方法的返回）分配给变量，然后尝试

console.log（transition\u selection.empty（））

。如果它是假的，那么你知道你有一些东西要转换

第二次尝试：

transition_selection.each（'start'，function（）{console.log（'start'）；}）。each（'interrupt'，function（）{console.log（'interrupted'）；}）。each（'end'，function（）{console.log（'end'）；}）

通过这种方式，您将能够看到转换是否已启动并被中断

第三次尝试：
transition.attr（'cx'，函数（d）{console.log（'attr got assigned'）；）}）

这样，您将知道您为“cx”提供的值是否已读取

实际上，在同一次运行中尝试以上所有操作。这样你就可以看到发生了什么

总是试着给你命名<代码>d3traget.transition（'somename'）

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

希望我给你的任何东西都能帮助你解决你的问题。祝你好运
 你能发布一个工作片段吗？这应该是可行的，这样问题就会出现在其他地方。你能告诉我你是在服务器端还是客户端使用这段代码吗？转换在服务器端代码（例如：nodejs）上不起作用。您确定d3知道如何插入
..CX
和
..CY
中提供的值吗？@chrisfrisna我最好的猜测是另一个转换正在中断它。请记住，只要对一个选择调用
.transition（）
，所有现有的转换都将被取消——我想这就是这里发生的情况。代码中还有很多其他的转换，我不清楚它们之间的关系。我在回答这个问题时看到了类似的东西。您是否尝试过像这样使用
attrTween
呢？不幸的是，这个JS不起作用。一个问题是，我们正在改变正在呈现的节拍。然后我们使用相同的函数设置节拍的动画。输入的
target
和
dur
是正确的，可以通过放置
debugger
语句进行验证。你的评估可能是肯定还有别的东西。但是什么呢？根据我们的诊断，D3是个问题。这可能是一个假设，但它是基于多年的D3经验和验证每个代码块是否有效。我仍在开发Plnkr，几乎就要完成了。正如您的代码所指出的，我们正在检查它是否已被替换，因此我们可以在正常情况下使用正常的
transition（）
，并且我们可以使用
setTimeout（）
（我们当前的管道胶带修补程序）设置动画，直到我们能够找出差异的原因。您可以在该函数中看到，
d3target
与
dur
保持不变，但是动画的实现必须更改，因为它在“录制”情况下失败。只是确认一下，据我们所知，d3target是“正确的”，并且根据在终端中查看它的结构。我确实看了一下，但如果不看它是如何被称为的，很难看出它可能会出错。我很乐意帮助你，这是一个有趣的问题。将等待您的plunkr获得更好的想法。
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

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

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.
       });
  }
}