Dispatch events using selection.dispatch?

[mbostock]

Rather than listening to the transition object, it would make a lot of sense to use selection.on to listen for transition events, since they happen on a per-element basis anyway. So instead of this:

selection.transition()
    .on("start", function() { console.log("started!"); })
    .style("color", "red");

Something like this:

selection
    .on("d3:transitionstart", function() { console.log("started!"); })
  .transition()
    .style("color", "red");

Or maybe if transition.on is an alias for selection.on:

selection.transition()
    .on("d3:transitionstart", function() { console.log("started!"); })
    .style("color", "red");

This would allow us to remove transition.on and the related machinery, which is great. It might add a little bit of overhead since we’d be dispatching a CustomEvent on every start, end and interrupt. But maybe it’s negligible?

Another potential downside is that you can only (easily) listen to all transition events on a given element, rather than listening to transition events for a particular transition.

This is related to ongoing work in d3-drag, where I need to decide between listening to the drag behavior for events, or having the drag behavior dispatch (custom) drag events using selection.dispatch.

[mbostock]

The primary issue here is that we typically want to listen to events for a specific transition, not for all transitions, and thus we also typically want to remove listeners automatically after the transition ends.

I wonder if transition.on could register a filtered listener that only receives transitions events for the given transition, and that is automatically removed when the transition ends.

[mbostock]

Let’s stick with d3-dispatch for events.

[Dhanraj073]

when using selection.on after ..selection.transition() gives an error ...on() is not a function ....but gives correct result if used in reverse order.. Any reason ?

[mbostock]

@Dhanraj073 They mean different things, and it depends on whether you’re using D3 3.x or D3 4.0 alpha.

In D3 4.0, selection.transition returns a transition, and transition.on is different from selection.on, so the order does matter because it means you’re calling different methods. selection.on registers a native browser event listener (such as for mousemove events) while transition.on registers a transition event listener (such as for transition end events).

In D3 3.x, selection.transition returns a transition, and there’s no transition.on method. If you want to listen for transition events, you need to use transition.each (which was renamed to transition.on in D3 4.0 for consistency).

[Dhanraj073]

@mbostock Got it.

[mbostock]

@Dhanraj073 Please use Stack Overflow tag d3.js or the d3-js Google group to ask for help. These issues are for feature requests and bug reports only. Thank you!

Hint: If you’re using D3 4.0 it’s d3.scaleOrdinal, not d3.scale.ordinal.

[curran]

Links for reference

• D3 Mailing list
• D3 Stack Overflow