d3.js la réécriture de zoom exemple dans version4
Faites glisser et Déposez Exemple
Je suis en train de réécrire une partie de l'exemple ci-dessus pour l'utiliser dans mon code, plus précisément de cette pièce:
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]);
}
Cependant, je suis coincé depuis la v4 paquet a un peu changé. J'ai écrit mon zoomListener fonction
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
}
et je sais que d'après la doc, les choses ont changé et les infos ne sont plus stockés sur ce que serait mon zoomListener
D3 V4 release note sur le zoom Je suppose que je suis juste confus sur la façon dont je suis supposé faire avec la nouvelle version. Les dernières lignes de mon centerNode de fonction ne fonctionnent pas ce qui a pour effet que, lorsque je centre le nœud du zoom et de panoramique reset...
Toute suggestion?
OriginalL'auteur Tekill | 2016-07-22
Vous devez vous connecter pour publier un commentaire.
Donc, après beaucoup de creuser et de tâtonnements, j'ai cam avec une réponse qui fonctionne très bien pour mes besoins. Notez que ce code ci-dessous est seulement la partie de mon code pas tout le code, certaines variables ont été explicites afin de ne pas les inclure. AUSSI C'EST DANS la VERSION 4 de d3.js.
Comme par exemples pour une v4 d3.js page, j'ai utilisé un rectangle d'appliquer le zoom à
Dans le Centre de la fonction du nœud, je suis en utilisant
d3.zoomTransform(zoomer.node());
pour obtenir la transformation en cours appliqué à la page.Le but de cette fonction est uniquement pour le centre de la grille d'arbre à la verticale non pas à l'horizontale, donc je suis maintenant la transformation en cours.x (ici
t.x
) la même chose.La coordonnée dans mon fichier svg flip donc pourquoi
y= source.x0
, la source est un nœud a cliqué dans mon réductible arbre. ("Sur l'exemple référencé en haut de ce fil de comprendre ce que je suis en train de convertir à la version 4)Je suis appliquer la transformation de mon G élément et puis je veux commettre ces changements, zoom transformer, pour ce faire j'utilise le
.on("end", function(){})
sinon il était en train de faire le comportement bizarre avec la transition, en faisant que tout ce qu'il fait est de définir l'état actuel de la transformation.La ligne ci-dessus est l'application d'une traduction de x et y et une échelle -- c'est égal à ce que l'état actuel -- à l'identité de la matrice a pour obtenir une nouvelle transformation pour le G, je puis l'appliquer à
zoomer
qui est l'élément que j'ai appelézoom
plus tôt.Cela a fonctionné comme un charme pour moi!
OriginalL'auteur Tekill
Appel
transform.scale
ettransform.translate
retourne une nouvelle transformation, et modifie rien. Donc:(À ce stade
zoomListener
est assez imprécise de ce nom, mais peu importe...)k
,x
, ety
peut être dérivée à partir desource
, peut-être que vous montrez, mais je ne suis pas sûr, parce que je ne sais pas ce quesource
est. Mais pour moi,t.x*t.k
semble suspect, parce que c'est en multipliant l'existant transforme x par son envergure. Me semble qu'il serait la cause d'une boucle de rétroaction.De plus en sur le zoom en v4, découvrez cette StackOverflow post, ou cet exemple par mbostock démontrant le contrôle par programmation sur le zoom de la transformation d'un élément (toile dans ce cas) et comprend des transitions.
droit, mais je ne connais pas les termes dans lesquels
source.x0
etsource.y0
sont définis. Comme le sont ils lat/lng paires ou en pixels? Je devine que les pixels. De toute façon, je suis en train de travailler sur le même genre de conversion moi-même, pourrait avoir plus de perspicacité plus tard...J'ai découvert que l'ordre de la transformation est très important lorsque l'on travaille avec la nouvelle
zoomTransform
objet. Plus précisément,translate()
devrait venir avantscale()
, sinon la traduction en interne est multiplié par l'échelle. J'ai modifié ma réponse pour refléter cela.Bon à savoir. Oui la source.x0 et de la source.y0 sont à partir d'un système de coordonnées svg, donc, en pixels. L'x0 serait l'équivalent de la coordonnée y et y0 à la coordonnée x de la d3 traduire
Aussi lorsque j'utilise d3.zoomTransform(nœud) de la fonction de tout ce que j'obtiens est la matrice d'identité, j'ai de zoom et de panoramique et puis j'ai essayé
d3.zoomTransform(zoom)
d3.zoomTransform(zoom, svg)
etd3.zoomTransform(svg)
dans la console et c'est toujours` k:1 x;0 y:0`, je suis pas certain de la façon d'utiliser cette fonction pour obtenir la transformation en cours. Avez-vous aperçu? @meetamitOriginalL'auteur meetamit