Wrong way to transform a D3 projection

Actualization This behaviour has been corrected and now the example is valid, since the points are ordered the same way in both projections.

From the mailing list:

OK, this has been fixed in release 3.1.4, so you'll no longer need the work-around described in my previous email. Enjoy, and thank you for the bug report!

/mbostock/580de8199ea3b85f822a

Initial message This example shows how a projection change must NOT be done. It works properly when the D3 version is 3.0.8, but from 3.1.0, the change does strange things. Just change the D3 source at line 13 to https://raw.github.com/mbostock/d3/v3.1.2/d3.min.js to see the effects.

I asked the question [at the D3 mailing list] (https://groups.google.com/forum/?fromgroups=#!topic/d3-js/9j37YsWU6bM).

As Mike Bostock answered:

The issue you are seeing is that projections apply adaptive resampling (as of D3 3.0, which was released last December). Therefore the number of control points for the same geometry may differ when different projections are used, and thus you cannot apply naive path interpolation to transition between two projections.

Mike Bostock has a working example, and Jason David [has an other one] (https://www.jasondavies.com/maps/transition/)

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

.states {
  fill: #ccc;
  stroke: #fff;
}
</style>
<body>
<button type="button" id="change">Change</button>

var path = d3.geo.path()
.projection(projection);

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

d3.json("/../../data/us.json", function(error, us) {
   states = svg.append("path")
      .attr("class", "states")
      .datum(topojson.object(us, us.objects.states))
      .attr("d", path);

});

d3.select("#change").on("click", function() {
  projection = d3.geo.albers();
path.projection(projection);
states.transition()
      .duration(10000)
      .attr("d", path);
});

</script>

Updated missing url https://raw.github.com/mbostock/d3/v3.0.8/d3.min.js to https://cdn.jsdelivr.net/gh/mbostock/d3/v3.0.8/d3.min.js

Modified http://d3js.org/topojson.v0.min.js to a secure url

Changed /mbostock/raw/4090846/us.json to a local referenece

https://raw.github.com/mbostock/d3/v3.0.8/d3.min.js

https://d3js.org/topojson.v0.min.js