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函数的不同类的顺序，我相信你想要的是根本不可能的。根据{{3}}，selectAll：

选择与指定选择器字符串匹配的所有元素。元素将在文档顺序中从上到下进行选择。（强调我的）

因此，selectAll(".foo,.bar")和selectAll(".bar,.foo")没有区别。

但是，如果您希望按照您在代码中传递的不同类的顺序应用转换，我建议您使用数组与您的班级和forEach。

在这个演示中，我故意在＆＃34;无序＆＃34;中设置圆圈的类别。方式：

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

然后，forEach只是按照您想要的顺序获取每个类（在本例中为'.first,.second,.third,.fourth'）并应用转换：

＆＃13;

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')
})

＆＃13;

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

＆＃13;

D3设置要按顺序转换的元素

1 个答案: