Reselect a transition. about d3-transition HOT 6 CLOSED

Another example (from bl.ocks.org/e32cc94b26df9c5e28aa), is where you want to create a shared transition on multiple existing selections, such as:

var foo = d3.selectAll(".foo");
var bar = d3.selectAll(".bar");

You have to either create one transition and then re-select your selections:

var transition = d3.transition().duration(1000);
transition.selectAll(".foo").style("fill", "red");
transition.selectAll(".bar").style("stroke", "red");

Or you have to create multiple independent transitions:

foo.transition()
    .duration(1000)
    .style("fill", "red");

bar.transition()
    .duration(1000)
    .style("stroke", "red");

The latter is arguably easier but it’s a bit bad since the transitions won’t have the same id, or even necessarily the same start time. (Though the latter could be fixed in some cases if we switch to the d3.event’s timestamp per #18.) And you have to duplicate the timing parameters, unless you want to do something like this, which is cumbersome:

transition(foo).style("fill", "red");
transition(bar).style("stroke", "red");

function transition(selection) {
  return selection.transition().duration(1000);
}

Here’s the transition.reselect method proposed above, which returns the corresponding transition for the specified selection. It could also be named transition.selection or transition.of.

var transition = d3.transition().duration(1000);
transition.reselect(foo).style("fill", "red");
transition.reselect(bar).style("stroke", "red");

And here’s the selection.transition(transition) method as proposed above:

var transition = d3.transition().duration(1000);
foo.transition(transition).style("fill", "red");
bar.transition(transition).style("stroke", "red");

It’s a bit shorter, which is nice. I worry about overloading it with selection.transition() and _selection.transition(_name*), but it seems similar enough not to be a big problem.

from d3-transition.

d3-timer 0.3 makes transitions scheduled during the same frame or event have consistent timing, at least.

from d3-transition.

Is this too short?

var transition = d3.transition().duration(1000);
transition.of(foo).style("fill", "red");
transition.of(bar).style("stroke", "red");

from d3-transition.

Or maybe you “apply” a transition to a selection?

var transition = d3.transition().duration(1000);
transition.apply(foo).style("fill", "red");
transition.apply(bar).style("stroke", "red");

from d3-transition.

The problem with the above suggestions is that it makes it seem like tweens and event listeners from the originating transition might be applied to the specified selection, when instead it’s creating a new transition (or reselecting an existing transition) on the selected elements. And if it’s create a new transition, it’s just inheriting the timing parameters, not everything else.

from d3-transition.

I feel like overloading selection.transition(transition) is the way to go.

from d3-transition.