链式转换不会触发分步

首先，我研究了一些相关的项目，尝试过了，但没有得到很好的结果。链式转换不会触发分步

接下来，我的代码的相关部分：

function moveMarker(i) { 

    var curr_i = parseInt(d3.select("#nomad").attr("nomad-index")); 
    var target_i = parseInt(i); 

    switch (curr_i) { 
     case 0: 
      switch (target_i) { 
       case 0: 
        break; 
       case 1: 
        moveToMark(1); 
        break; 
       case 2: 
        moveToMark(1); 
        moveToMark(2); 
        break; 
       case 3: 
        moveToMark(1); 
        moveToMark(2); 
        moveToMark(3); 
        break; 
       case 4: 
        moveToMark(1); 
        moveToMark(2); 
        moveToMark(3); 
        moveToMark(4); 
        break; 
      } 
     case 1: 
      switch (target_i) { 
       case 0: 
        moveToMark(0); 
        break; 
       case 1: 
        break; 
       case 2: 
        moveToMark(2); 
        break; 
       case 3: 
        moveToMark(2); 
        moveToMark(3); 
        break; 
       case 4: 
        moveToMark(2); 
        moveToMark(3); 
        moveToMark(4); 
        break; 
      } 
     case 2: 
      switch (target_i) { 
       case 0: 
        moveToMark(1); 
        moveToMark(0); 
        break; 
       case 1: 
        moveToMark(1); 
        break; 
       case 2: 
        break; 
       case 3: 
        moveToMark(3); 
        break; 
       case 4: 
        moveToMark(3); 
        moveToMark(4); 
        break; 
      } 
     case 3: 
      switch (target_i) { 
       case 0: 
        moveToMark(2); 
        moveToMark(1); 
        moveToMark(0); 
        break; 
       case 1: 
        moveToMark(2); 
        moveToMark(1); 
        break; 
       case 2: 
        moveToMark(2); 
        break; 
       case 3: 
        break; 
       case 4: 
        moveToMark(4); 
        break; 
      } 
     case 4: 
      switch (target_i) { 
       case 0: 
        moveToMark(3); 
        moveToMark(2); 
        moveToMark(1); 
        moveToMark(0); 
        break; 
       case 1: 
        moveToMark(3); 
        moveToMark(2); 
        moveToMark(1); 
        break; 
       case 2: 
        moveToMark(3); 
        moveToMark(2); 
        break; 
       case 3: 
        moveToMark(3); 
        break; 
       case 4: 
        break; 
      } 
    } 
} 

function moveToMark(i) { 

    var x = spot[i][7]; // Latitude 
    var y = spot[i][8]; // Longitude 

    d3.select("#nomad") 
     .attr("nomad-index", i) 
     .transition() 
     .delay(3000) 
     .duration(1000) 
     .attr("cx", x) 
     .attr("cy", y); 
}

的我想要做的要点：

我有一个事件表。在点击表格中的任何事件时，我会有一个圆圈（nomad），移动到spot数据集中确定的该事件的相应位置。直接移动点对点是没有问题的。但是，我有一个特别的限制：我必须根据事件的时间表移动我。

说，我点击事件＃3。我的圈子必须首先进入事件＃1和＃2，之后他们会留在事件＃3。如果圆圈无论如何，点击任何其他事件，无论是较低还是较高索引，都需要遍历当前位置与其目标之间的事件。

我相信我的嵌套开关盒可以进一步解释这一点。我相信我所尝试的并不像我想要的那样复杂。然而，我遇到了一个重大障碍：我的圈子并没有一步一步地经历事件，而是在延迟之后马上跳到最后一个事件。

我已经在上面的链接中看到转换有关于链接的问题，或者我必须雇用end(...)来完成此项工作。

问题/ S：

是否有可能减少这种尝试递归函数呢？如果是这样，怎么样？如果不是，我该如何使每个moveToMark连续发射？

来源

2015-10-20 Manhattan

问题是，在D3选择上创建转换会取消可能已创建的任何其他转换。也就是说，只有最后一次调用.transition()才会生效，因为所有先前的转换都被取消。

解决方法是在转换上创建另一个转换，而不是选择（请参阅the documentation）。这看起来像下面这样：

var cur_trans; 

function moveMarker(i) { 
    cur_trans = d3.select("#nomad"); 
    // more code 
} 

function moveToMark(i) { 
    var x = spot[i][7]; // Latitude 
    var y = spot[i][8]; // Longitude 

    d3.select("#nomad") 
    .attr("nomad-index", i); 

    cur_trans = cur_trans 
    .transition() 
    .delay(3000) 
    .duration(1000) 
    .attr("cx", x) 
    .attr("cy", y); 
}

这将覆盖cur_trans与每个呼叫的新的过渡，从而确保您不会失去任何过渡。

请注意，根据您的代码的其余部分及其调用结构，可能会出现竞争条件等问题，您可能需要防范。

来源

2015-10-20 16:49:10

似乎是这样的路要走。谢谢！ – Manhattan

链式转换不会触发分步

回答

相关问题