Jumping to the end of a transition

An example of a way to declare the end-state of a transition once in a generic setter with chaining, and then use that setter on the transition to update gradually or call it on a selection to jump to the end state.

Should work with .style(), .attr(), .styleTween(), and .attrTween(), but not .tween().

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

body {
    text-align: center;
  }

button {
    font-size: 24px;
  }

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

path {
    stroke-width: 1px;
    stroke: black;
    fill: none;
  }

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

var width = 860,
    height = 300,
    margin = 50;

var svg = d3.select("body").append("svg")
  .attr("width",width + margin * 2)
  .attr("height",height + margin * 2)
  .append("g")
    .attr("transform","translate(" + margin + " " + margin + ")")

var path = svg.append("path")
  .attr("d","M0 150 C 205 0, 225 0, 430 150 S 655 300, 860 150");

var dots = svg.selectAll("circle")
  .data(d3.range(2))
  .enter()
  .append("circle")
    .attr("r",25)
    .attr("cx",function(d){
      return d ? width : 0;
    })
    .attr("cy",height / 2);

var dotSetter = setter()
  .style("fill",function(d){
    return d ? "#0e88ba" : "#fc0";
  })
  .attr("cx",function(d){
    return d ? 0 : width;
  });

var pathSetter = setter()
    .style("stroke-width","6px")
    .attrTween("stroke-dasharray",tweenDash)
    .attr("cx",width);

dots.transition()
  .duration(3000)
  .call(dotSetter);

path.transition()
  .duration(3000)
  .call(pathSetter);

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

function setter() {

var props = [];

function set(selection) {

props.forEach(function(p){

var idx = p.type.indexOf("Tween");

if (idx < 0 || selection instanceof d3.transition) {

selection[p.type](p.key,p.value);

} else {

// convert attrTween to attr and styleTween to style,
        // call the tween with a t value of 1

// TODO: also catch generic `.tween()`?
        // TODO: catch null tween returned from factory?

selection[p.type.slice(0,idx)](p.key,function(d,i){

return p.value.call(this,d,i)(1);

});

}

return selection;

});

}

["attr","style","text","attrTween","styleTween"].forEach(function(type){
    set[type] = function(key,value) {
      props.push({type: type, key: key, value: value});
      return set;
    };
  });

return set;

}

function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);

return function(t) { return i(t); };
}

</script>

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