鏈式轉換不會觸發分步

首先，我研究了一些相關的項目，嘗試過了，但沒有得到很好的結果。鏈式轉換不會觸發分步

接下來，我的代碼的相關部分：

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

鏈式轉換不會觸發分步

回答

相關問題