javascript - 应用过渡时的 D3js 排序问题

Question

我已经通过 d.id 绑定(bind)了一个数据集到 svg:g

var categorized = g1.selectAll("g.node")
                    .data(dataset, function(d){return d.id})
                    .classed('filtered', false);
categorized.enter()
           .append("g")
           .attr("class", "node")
...

我使用一个函数从数据值中对其进行排序，如下所示:

var sorted = dataset
                 .filter(function(d) { return d.notation[3].value >=50 } )
                 .sort(function(a, b) { return d3.descending(a.notation[3].value,
                                        b.notation[3].value) });

当我console.log它时，它返回正确的顺序

var filtered = g1.selectAll("g.node")
                 .data(sorted, function(d) {return d.id})
                 .classed('filtered', true);

如果我 console.log 它，顺序仍然正确，但如果我应用延迟，它会颠倒结果顺序

scored.transition()
      .delay(500).duration(1000)
      .attr("id", function(d) {
          console.log(d.id);
      });

但如果我消除延迟，则可以很好地排序。

我的问题:我做错了什么吗？

Answer 1

我认为您观察到 d3.js 通常使用反向迭代的“优化”for 循环(请参阅 Are loops really faster in reverse? 以及其他引用文献)。

简单地逆转您的选择会有效吗？我不确定您要转换什么，因此您需要按特定顺序应用补间步骤。