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>