Cómo hacer una transición suave para la reproyección de mapas en d3 js
Me gustaría hacer una transición sin problemas entre alber / orthographic en una mini aplicación que estoy creando, como este ejemplo:
http://mbostock.github.io/d3/talk/20111018/#27
Parece que esta transición suave se rompe en v3, sin embargo, con una transición bastante entrecortada de las rutas del mapa:
El código es bastante sencillo, inicializo el mapa como siempre, luego ejecuto orto () para actualizarlo.
function ortho() {
var self = this,
h = 1000,
w = document.width;
this.projection = d3.geo.orthographic()
.scale(500)
.translate([ (w - 300) / 2, h / 2])
.clipAngle(90)
.rotate([90, 0, 0])
.precision(.1);
this.path = d3.geo.path()
.projection(this.projection);
//update path WITH transition
d3.selectAll('path')
.transition()
.duration(900)
.attr('d', app.path);
}
El mapa cambia de albers a ortográfico, pero la transición no es suave. Cualquier pensamiento sería genial.