block by veltman ad5aaa518266ead2cc55

styleTween for percentages

Full Screen

index.html

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

div {
  height: 10px;
  background-color: steelblue;
}

div div {
  background-color: tomato;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var data = [
  [70,30],
  [30,70]
];

var bars = d3.selectAll("div")
  .data(data)
  .enter()
  .append("div")
    .append("div")
    .style("width",function(d){
      return d[0]+"%";
    });

bars.transition()
  .duration(1000)
  .ease("exp-out")
  .styleTween("width",function(d){
    return function(t) { return (d[0] * (1 - t) + d[1] * t)+"%"; };
  });

</script>