javascript - What is the 'start' event in d3.js? - Stack Overflow

admin管理员组

文章数量:1296844

I noticed in Bostock's most recent block he has a 'start' event:

d3.select("body").selectAll("div")
    .data(d3.range(n))
  .enter().append("div")
  .transition()
    .delay(function(d, i) { return i + Math.random() * n / 4; })
    .ease(d3.easeLinear)
    .on("start", function repeat() {
        d3.active(this)
            .styleTween("background-color", function() { return whiteblue; })
          .transition()
            .delay(1000)
            .styleTween("background-color", function() { return blueorange; })
          .transition()
            .delay(1000)
            .styleTween("background-color", function() { return orangewhite; })
          .transition()
            .delay(n)
            .on("start", repeat);
      });

Does anyone know what this does?

Is it the equivalent to on load or is it fired after the delay period when the transition begins?

I noticed in Bostock's most recent block he has a 'start' event:

d3.select("body").selectAll("div")
    .data(d3.range(n))
  .enter().append("div")
  .transition()
    .delay(function(d, i) { return i + Math.random() * n / 4; })
    .ease(d3.easeLinear)
    .on("start", function repeat() {
        d3.active(this)
            .styleTween("background-color", function() { return whiteblue; })
          .transition()
            .delay(1000)
            .styleTween("background-color", function() { return blueorange; })
          .transition()
            .delay(1000)
            .styleTween("background-color", function() { return orangewhite; })
          .transition()
            .delay(n)
            .on("start", repeat);
      });

Does anyone know what this does?

Is it the equivalent to on load or is it fired after the delay period when the transition begins?

• javascript
• d3.js

Share Improve this question Follow edited Feb 13, 2016 at 22:18 Union find asked Feb 12, 2016 at 3:08 Union findUnion find 8,1601717 gold badges6666 silver badges117117 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

That block is written in d3 v4. It looks like the v3 transition.each has been renamed transition.on (which makes more sense). That said start has always been an event-type for a transition:

If type is specified, adds a listener for transition events, supporting "start", "end" and "interrupt" events. The listener will be invoked for each individual element in the transition.

The start event is invoked during the first asynchronous callback (tick) of the transition, before any tweens are invoked. For transitions with zero delay, this is typically about 17ms after the transition is scheduled. State events are useful for triggering instantaneous changes to each element, such as changing attributes that cannot be interpolated.

To answer you specific question (my bolding above) "or is it for when the transition begins after the delay period" - yes.

I've been poking around trying to figure this out. "start" is not a normal DOM event and is not one of the events supplied by D3. After doing some research, here's what I've e to find out:

"Transitions are a limited form of key frame animation with only two key frames: start and end"

"The start event is then dispatched, and the transition initializes its tweens, which may involve retrieving starting values from the DOM and constructing interpolators."

From: https://bost.ocks/mike/transition/

(that's linked to directly from the d3-transition repo @ https://github./d3/d3-transition#active see "working with transitions" link).

I believe that the D3-transition library being used in the example implicitly uses the same - that is, the transitions have two key frames. The "start" "event" actually represents the first key frame. In fact, there's a slight delay when the transition begins so it makes sense that one would wait until the keyframe "started".

本文标签： javascriptWhat is the 39start39 event in d3jsStack Overflow