score:0

Accepted answer

first off, you are missing the part where transition is defined.
Its a var of some sort but is not defined in your snippet.
That is kinda important but its not needed to know why the function continues to run.

You need to first understand both forms of the jquery each function. http://api.jquery.com/each/ http://api.jquery.com/jquery.each/

transition = transition.each(function() { ... }).transition().each("start", tick);

::note that ... is hiding a lot of code::

this is essentially one line of code.

it is saying for each child of the transition var, if any, run the "..." code for it. That is the first jquery each statement. Inside this function $(this) would equal the child obj of transition. The child object is never used however.

After all iterations are complete, then the transition() function is ran. (again not sure what that is)

Lastly, each is called again but with a different form. This time it is saying run the tick function with the string "start" as the obj. It means that inside that function $(this) = "start". Again the obj is never used.

Because the invoking object is never used, essentially .each is just calling the tick function.

Really, this is a very odd way of doing this. not sure why there is such heavy use of .each. My understanding is that .each is actually kind of slow compared to other means of iterating and invoking callbacks.

UPDATE--

to start/stop with a click I would introduce a var at the top of the script.

var running = true;

(set to false to start as not running)

then surround contents of the tick function with an if statement.

if(running) 
{
  transition = transition.each(function() { ... }).transition().each("start", tick);
}

then create one or two click handlers. (for one toggle or start and stop buttons)

There are many ways to accomplish this.

$(#[button ID]).click( function(){
   if(running)
   {
     running = false;
   }
   else
   {
     running = true;
     tick();
   }

});

This is a basic plan of attack. There maybe an issue when clicking the button in rapid succession. That is for you to fix as needed.

score:0

I've had this same problem before...the transition is defined as:

var transition = d3.select({}).transition()
  .duration(1000)
  .ease("linear");

You need to run a function that changed the transition to zero:

transition = transition.transition(0).duration(0);

This essentially stops the transition from running completely.

Then to restart the transition:

  transition = d3.select({}).transition()
      .duration(shiftDuration)
      .ease("linear");

  tick();

Related Query

More Query from same tag