D3 - 交錯顏色變化

我一直在這一段時間卡住了。我有一個像這樣一系列矩形：D3 - 交錯顏色變化

，我希望逐漸改變每個三角形的顏色，所以第一個會變色，一個暫停，然後是第二個，又過了一會，然後第三等等，這對於改變爲單一顏色已經很好。然而目前，當我的方法終止，矩形的所有填充仍有待顏色又改爲像現在這樣：

是否有再次恢復到藍色的方式來逐步改變我的長方形橙色經過一段時間後？因此，過渡應該是這個樣子：

，停頓幾秒鐘氮量，然後

，暫停

這是我的嘗試之一：

 var x = ["a", "f", "t", "q", "g", "y", "p"]; 
     var w = (x.length + 1) * 50; 
     var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 

      for (var i = 0; i < x.length; i++) { 
       //This successfully changes all the rect into orange ones 
       svg.select("#rect" + i) 
        .data([i]) 
        .transition() 
        .delay(i * 1000) 
        .attr("x", (i * 45) + 45) 
        .attr("y", "0px") 
        .attr("width", "40px") 
        .attr("height", "40px") 
        .attr("fill", "rgb(255, 116, 56)"); 

       //I was hoping this would revert each rect to the blue colour, this did not work       
       svg.select("#rect" + i-1) 
        .data([i-1]) 
        .transition() 
        .delay(i* 2500) 
        .attr("x", ((i-1) * 45) + 45) 
        .attr("y", "0px") 
        .attr("width", "40px") 
        .attr("height", "40px") 
        .attr("fill", "rgb(0, 0, 50)"); 

      }

謝謝！

來源

2014-01-28 201403540

您的示例代碼並非真正使用D3打算使用的方式。您的嘗試是應用命令式編程方法，其中D3旨在支持更具說明性的方法。關鍵是你想要利用d3提供的數據連接框架和聲明式樣式/轉換。

檢查此示例出http://jsfiddle.net/reblace/YbMmQ/並按照本教程http://bl.ocks.org/mbostock/3808234看看這種方法是否更有意義。

在Fiddle中，有一種更新方法，將選定的矩形連接到數據數組，並指定D3在添加vs更新時如何處理數組元素。對於這個例子，在add上我們指定它們的位置和默認的藍色。在更新時，我們只需要改變顏色。在更新函數之外，我們更改「選定」矩形，每次更新被調用時，矩形的顏色都會改變，使得所選矩形爲橙色。此更改應用了500 ms的持續時間，以便每當矩形的顏色從藍色 - >橙色或橙色 - >藍色更改時，均可在500毫秒內平滑過渡。

如果您不知道什麼都不會添加到數據數組中，您可以將代碼的「// Enter」部分移動到更新塊之外，以便只調用一次。對於這個示例，它將支持向數據數組添加元素，但不會刪除它們，因爲沒有定義「exit（）」行爲。

function update(data) { 
    var rect = svg.selectAll("rect").data(x); 

    //Update 
    rect 
     .transition() 
     .duration(500) 
      .attr("fill", function(d, i) { return (i === selected)? "rgb(255, 116, 56)" : "rgb(0, 0, 50)"; }); 

    //Enter 
    rect.enter().append("rect") 
     .attr("x", function(d, i) { return (i * 45); }) 
     .attr("y", "0px") 
     .attr("width", "40px") 
     .attr("height", "40px") 
     .attr("fill", "rgb(0, 0, 50)"); 
}

與您的代碼的特定問題相關的事實，你是手動遍歷數據陣列上，選擇要操作DOM的元素，並應用基於時間的過渡，以這些元素。這是非常多的你如何使用像jQuery這樣的框架來做到這一點。它看起來像是讓轉換持續時間和延遲混淆，所以你實際上在做的是循環遍歷數組中的所有元素，並將顏色更改爲橙色，然後立即回到藍色，但轉換從來沒有真正的時間來動畫更改。

無論如何，就像我說過的，請查看我提供的小提琴以及與d3一起使用的一般模式教程，以深入瞭解如何使用d3構建這些可視化類型。祝你好運！

來源

2014-01-28 20:12:07 reblace

D3 - 交錯顏色變化

回答

相關問題