d3.js reescrevendo o exemplo de zoom na versão4
Estou tentando reescrever parte deste exemplo acima para usar no meu código, especificamente nesta parte:
function centerNode(source) {
scale = zoomListener.scale();
x = -source.y0;
y = -source.x0;
x = x * scale + viewerWidth / 2;
y = y * scale + viewerHeight / 2;
d3.select('g').transition()
.duration(duration)
.attr("transform", "translate(" + x + "," + y + ")scale(" + scale + ")");
zoomListener.scale(scale);
zoomListener.translate([x, y]);
}
No entanto, estou ficando paralisado, pois o pacote v4 mudou bastante. Eu escrevi minha função zoomListener como
var zoomListener = d3.zoom()
.scaleExtent([0.3,2])
.on("zoom", zoomed);
function zoomed() {
transform = d3.event.transform;
console.log(d3.event);
svg.attr("transform", transform);
}
function centerNode(source){
t = transform;
console.log(t);
x = t.x*t.k; //I only want things to be centered vertically
y = (t.y + -source.x0)*t.k + (viewerHeight)/2 ;
svg.transition()
.duration(duration)
.attr("transform","translate(" + x + "," + y +")scale(" + t.k + ")");
transform.scale(t.k); //DOES NOT WORK
transform.translate([x, y]); //DOES NOT WORK
}
e sei que, de acordo com o documento, as coisas mudaram e as informações não são mais armazenadas no que seria meu zoomListenerNota de versão do D3 V4 no zoom Acho que estou confuso sobre como devo fazê-lo com a nova versão. As últimas linhas da minha função centerNode não funcionam, o que tem como efeito que, quando centralizo o nó, o zoom e o pan são redefinidos ...
Alguma sugestão?