Rappel du zoom D3

Question

Prenez cet exemple intemporel du zoom D3. Code raccourci ci-dessous :

var svg = d3.select("svg")
  ...;

var zoom = d3.zoom()
    .scaleExtent([1, 40])
    .translateExtent([[-100, -100], [width + 90, height + 100]])
    .on("zoom", zoomed);

...

d3.select("button")
    .on("click", resetted);

svg.call(zoom);

function zoomed() {
  view.attr("transform", d3.event.transform);
  gX.call(xAxis.scale(d3.event.transform.rescaleX(x)));
  gY.call(yAxis.scale(d3.event.transform.rescaleY(y)));
}

function resetted() {
  svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity);
}

Dans la bibliothèque D3 Zoom, on spécifie le comportement du zoom, puis on applique le zoom au canevas ou à la cible SVG. Comment/où pourrais-je envoyer un callback en tant que paramètre de la fonction zoomed() sans redéfinir le comportement du zoom ?

Answer 1

Puisque vous demandez...

Comment/où pourrais-je envoyer un callback comme paramètre ?

... votre question est dangereusement trop vaste . Mais voici une possibilité (parmi d'autres) :

Supposons cette simple fonction de rappel :

function callback(x){
    console.log(x);
}

Nous pouvons l'envoyer au zoom fonction changeant l'auditeur. Donc, au lieu de :

.on("zoom", zoomed);

Nous pouvons le faire :

.on("zoom", function(){
    zoomed(callback)
});

Et, dans le zoom en définissant l'argument de rappel. Par exemple, enregistrons le d3.event.transform :

function zoomed(fn) {
    fn(d3.event.transform);
    //rest of the code...
}

Voici une démonstration de bl.ocks : http://blockbuilder.org/GerardoFurtado/38c77c024ba4cc42c86221117fed4164