1

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?

HaskellElephant
  • 9,819
  • 4
  • 38
  • 67
mikmikmik
  • 500
  • 1
  • 5
  • 10

1 Answers1

0

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.

Community
  • 1
  • 1
ZachB
  • 13,051
  • 4
  • 61
  • 89
  • Thanks for your answer. I did try to reverse it be I use it also in a list which doesn't need to be reversed... because there's no delay on it. And I don't want to tweak to much my code at this point. For now i'm using it without the delay. But i'm still wondering about this and why the delay makes the order changing... You meant the optimized for loop would be in the delay fn? – mikmikmik Sep 01 '12 at 17:49
  • I haven't used `delay` before. Is that staggering the transitions for each element in `score` by 500 ms, thus making the reverse order obvious? I assumed it would delay everything by 500 ms and then start them all at once. The optimized for loops are everywhere in d3. – ZachB Sep 01 '12 at 18:03
  • The delay apply to the transitions, in fact it's moving circles to another coords, the result is that my circles which are supposed to be ordered from the best score to the lowest, get reversed. Yes they fire all at the same time. I delayed during the exit transition time of the other circles. – mikmikmik Sep 01 '12 at 18:29
  • I see. Can you post the code where you're setting the coordinates -- or all the pertinent code? That sounds like the problem is elsewhere. – ZachB Sep 01 '12 at 18:31