D3js排序问题适用于过渡

Question

I have a dataset already binded to svg:g via a d.id

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

I use a function to order it from a data value like this:

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

It returns the correct order when I console.log it

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

Still in the right order if I console.log it, but if I apply a delay it reverses the result order

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

but keeps it well sorted if I remove the delay.

My question : am I doing something in a bad way?

Answer 1

I think you're observing that d3.js generally uses the "optimized" for loop that iterates in reverse (see Are loops really faster in reverse? among other references).

Would it work to simply reverse your selection? I'm not sure what you're transitioning such that you need the tween steps to be applied in a certain order.