D3 transformer l'échelle et traduire
J'ai essayé de comprendre comment fonctionne la transformation en D3 mais je pense que je ne l'ai pas obtenue.
L'échelle modifie-t-elle la taille de l'objet SVG? ce qui signifie que si je donne un grand nombre, la taille de l'objet sera plus grande? La traduction déplace-t-elle l'objet d'un endroit à un autre? J'ai essayé mais cela n'a pas fonctionné comme je le pensais.
Pourriez-vous s'il vous plaît m'expliquer comment cela devrait fonctionner?
Les transformations sont des transformations SVG (pour plus de détails, jetez un œil à la standard ; voici quelques exemples ). Fondamentalement, l'échelle et la translation appliquent les transformations respectives au système de coordonnées, qui devrait fonctionner comme prévu dans la plupart des cas. Cependant, vous pouvez appliquer plusieurs transformations (par exemple, la première échelle, puis traduire) et le résultat pourrait ne pas être celui que vous attendiez.
Lorsque vous travaillez avec les transformations, n'oubliez pas qu'elles transforment le système de coordonnées. En principe, ce que vous dites est vrai - si vous appliquez une échelle> 1 à un objet, il semblera plus grand et un translaté le déplacera vers une position différente par rapport aux autres objets.
Scott Murray a écrit une grande explication à ce sujet[1]. Par exemple, pour l'extrait de code:
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
Il explique en utilisant ce qui suit:
Notez que nous utilisons attr () pour appliquer la transformation comme attribut de g. Les transformations SVG sont assez puissantes et peuvent accepter plusieurs types de définitions de transformation, y compris les échelles et les rotations. Mais nous restons simples ici avec seulement une transformation de traduction, qui pousse simplement l'ensemble du groupe g vers le haut et vers le bas d'une certaine quantité.
Les transformations de traduction sont spécifiées avec la syntaxe simple de translate (x, y), où x et y sont, évidemment, le nombre de pixels horizontaux et verticaux par lesquels traduire l'élément.
[1]: Extrait du chapitre 8, "Nettoyer" de Visualisation interactive des données pour le Web , qui était auparavant disponible gratuitement et se trouve désormais derrière un mur payant.
Je me rends compte que cette question est assez ancienne, mais je voulais partager une démo rapide des transformations de groupe, des chemins/formes et du positionnement relatif, pour tous ceux qui ont trouvé leur chemin ici à la recherche de plus d'informations: