D3設置元素按順序轉換

Question

我的腳本中有一些已經存在的元素，我想對其應用交錯轉換。我選擇通過其獨特的類不同的元素，像這樣，做的轉換：

d3.selectAll('.first,.second,.third,.fourth') 
    .transition() 
    .duration(250) 
    .transition() 
    .delay(function(d,i){console.log(d); return i*5000}) 
     .style('fill','black') 

然而，的元素是不能在first順序轉換 - >second - >third - >fourth，因爲他們顯示在selectAll。它們似乎很隨機，儘管這可能與它們在DOM中出現的方式有關。我如何讓他們按照我在selectAll中的順序進行轉換？

Answer 1

我不知道D3選擇能否保持您傳遞給selectAll函數的不同類的順序，我相信你想要的東西根本不可能。根據documentation，selectAll：

選擇與指定的選擇器字符串匹配的所有元素。元素將從文檔順序中選擇，從上到下。 （強調我的）

因此，selectAll(".foo,.bar")和selectAll(".bar,.foo")沒有區別。

但是，如果要應用在你傳遞在代碼中不同類別的順序轉變，我想提出以下解決方法：使用陣列與你的類和forEach。

在本演示中，我特意設置圈的班級的「無序」的方式：

["second", "first", "fourth", "third", "first"] 

然後，forEach只是獲取你想要的順序爲每個類（在這種情況下， '.first,.second,.third,.fourth'）和適用的過渡：

var svg = d3.select("svg"); 
 

 
var circles = svg.selectAll("foo") 
 
    .data(["second", "first", "fourth", "third", "first"]) 
 
    .enter() 
 
    .append("circle") 
 
    .attr("cy", 30) 
 
    .attr("cx", (d, i) => 40 + 40 * i) 
 
    .attr("r", 10) 
 
    .attr("class", d=>d) 
 
    .style("fill", "lightgray"); 
 
    
 

 
["first", "second", "third", "fourth"].forEach(function(d,i){ 
 
    d3.selectAll("."+d).transition() 
 
    .duration(250) 
 
    .transition() 
 
    .delay(1000 + i*1000) 
 
    .style('fill', 'black') 
 
})

<script src="https://d3js.org/d3.v4.js"></script> 
 
<svg></svg>