Interrupt transition

<!DOCTYPE html>
<meta charset="utf-8">
<style>

button {
    font-size: 36px;
  }

circle {
    stroke: none;
    fill: #de1e3d;
  }

</style>
<body>
<button>Stop</button>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js"></script>
<script>

var width = 960,
    height = 400;

var svg = d3.select("body").append("svg")
  .attr("width",width)
  .attr("height",height);

var dots = svg.selectAll("circle")
  .data(randomArray(100))
  .enter()
  .append("circle")
    .attr("r",10)
    .attr("cx",function(d){
      return d.x1 * width;
    })
    .attr("cy",function(d){
      return d.y1 * height;
    });

dots.transition()
  .duration(5000)
  .ease("linear")
  .call(destination)
  .each("interrupt",destination);

d3.select("button").on("click",function(){
  dots.interrupt();
});

function randomArray(size) {

return d3.range(size).map(function(){
    return {
      x1: Math.random(),
      x2: Math.random(),
      y1: Math.random(),
      y2: Math.random()
    };
  });

}

function setter() {

var s,
      props = [];

function add(type) {
    return function(key,value) {
      props.push({type: type, key: key, value: value});
      return s;
    };
  }

function set() {

return function(selection) {

if (!(selection instanceof d3.selection || selection instanceof d3.transition)) {
          selection  = d3.select(this);
      }

props.forEach(function(prop){
        selection[prop.type](prop.key,prop.value);
      });

};

}

return s = {
    style: add("style"),
    attr: add("attr"),
    set: set
  };

}

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js