Remplacement de d3.transformer en D3 v4
Dans D3.js v4 la d3.méthode de transformation a été supprimé, sans aucun indice sur la façon dont le remplacer.
Quelqu'un sait-il comment remplacer les suivantes D3.js v3 de l'enseignement?
d3.transform(String).translate;
- étiez-vous à l'aide de d3.transform() pour?
- Pour analyser les valeurs de transformer un attribut, afin de récupérer le svg coordonnées.
- juste à l'utiliser .attr(); afin de trouver les coordonnées suffit d'utiliser .attr('x') et .attr('y')
- Selon le changelog il est parti. Il y a une fonction dans
transform/decompose.js
qui fait le calcul pour un usage interne uniquement. Malheureusement, il n'est pas exposé à un usage externe. - Je dois préciser le problème: j'ai un groupe d'éléments ( <g> ) qui sont traduits et/ou de rotation. Par conséquent, le code a été quelque chose comme <g id="..." class=".." transform="translate(X,Y)">. La d3.transformer(Chaîne) renvoie un objet avec des champs qui représente la traduction du groupe (X, Y), leur rotation, etc. Je sais que je peux obtenir la valeur de l'attribut transform et analyser ses valeurs, mais je cherchais l'équivalent de la d3 instructions.
- .attr("transformer", "traduire(value, yValue)rotation(nDeg)") faire le travail. Ou .attr("transformer", function (d) {return "translate("+(quelques-exploitation-sur-d)+")"})
Vous devez vous connecter pour publier un commentaire.
Modifier 2016-10-07: Pour une approche plus générale, voir l'addendum ci-dessous.
Selon le changelog il est parti. Il y a une fonction dans
transform/decompose.js
, cependant, qui fait le calcul pour un usage interne. Malheureusement, il n'est pas exposé à un usage externe.Cela dit, c'est facile à faire même sans mettre D3 à utiliser:
JS:
Cela crée un mannequin
g
élément à des fins de calcul standard en utilisant les méthodes du DOM et définit satransform
attribut de la chaîne de caractères contenant vos transformations. Il appelle ensuite.consolidate()
de laSVGTransformList
interface de consolider la peut-être longue liste de la transformation d'un seulSVGTransform
de typeSVG_TRANSFORM_MATRIX
qui contient le bouilli vers le bas la version de toutes les transformations dans samatrix
de la propriété. CetteSVGMatrix
par définition détient les valeurs de la traduction dans ses propriétése
etf
.À l'aide de cette fonction
getTranslation()
vous pouvez réécrire votre D3 v3 déclarationcomme
Additif
Parce que cette réponse a gagné en intérêt au fil du temps, j'ai décidé de mettre sur pied une méthode plus générale permettant de restituer non seulement la traduction, mais les valeurs de l'ensemble de la transformation des définitions de transformer la chaîne de caractères. L'approche de base est la même, comme stipulé dans mon premier post ci-dessus ainsi que les calculs de prises de
transform/decompose.js
. Cette fonction retourne un objet ayant des propriétés pour l'ensemble de la transformation des définitions un peu comme l'anciend3.transform()
fait.JS:
rotate
par exemple. Je serais heureux de le voir de retour.Si vous tirez dans d3 v4 par mnp, vous pouvez importer les
src/transform/parse
fichier directement et appelparseSvg
:Sur les éléments qui ont le d3.js
zoom
d'écoute sur eux, et habituellement le<g>
élément ajouté à l'élément svg -- vous pouvez utiliser cet appel pour obtenir la transformation des attributs à l'extérieur de la fonction de zoom:Renvoie la même valeur que lors de l'appel de
d3.event.transform
dans le zoom de la fonction d'événement lui-même.Appel
d3.event.transform
en dehors du zoom fonction d'événement erreur:Uncaught TypeError: Cannot read property 'transform' of null
- Je utiliser
d3.zoomTransform
pour permettre de panoramique et de zoom à partir de boutons à l'extérieur du graphique.Je l'ai trouvé un peu de solution plus simple que cela.
Dans cette matrice que vous avez cordinates e et f de la sorcière sont l'équivalent de x, y. (e === x, f === y). Pas besoin de mettre en œuvre votre propre fonction pour cela.
baseVal est une liste de transformations de l'élément. Vous ne pouvez pas les utiliser pour l'objet sans previus transformation! (la liste sera vide) Ou si vous avez fait beaucoup de traduction à l'objet de la dernière position sera sous le dernier élément de baseVal liste.
Je suis un peu en retard à la fête, mais j'ai eu un peu de code qui a été bénéfique pour moi, j'espère que cela vous aide aussi.
Le code ci-dessus par @altocumulus est assez complet et fonctionne comme un charme. Cependant, il n'a pas tout à fait répondre à mes besoins puisque je faisais les calculs à la main et nécessaires en vue de modifier certaines propriétés de transformation que le plus délicatement possible.
Ce n'est pas la solution pour tout le monde, mais c'était parfait pour moi.
La chose vraiment grande avec la fonction première est que je peux manuellement modifier une propriété spécifique (par exemple, rotation), et ne pas avoir à vous soucier de la façon dont elle affecte les traduire ou quoi que ce soit d'autre (lors de la rotation autour d'un point), alors que quand je m'appuie sur l'intégré ou même
d3.transform
méthodes de consolider toutes les propriétés en une seule valeur.Pourquoi est-ce cool?
Imaginer un code HTML
À l'aide de d3.transformer-je obtenir:
En forme d'objet
Dans la forme d'une chaîne
Ce qui est correct mathématiquement, mais il est difficile pour moi de simplement supprimer l'angle de rotation et la traduction qui devait être présenté à la rotation de cet élément autour d'un point donné.
À l'aide de mon
_getTokenizedTransformAttributeValue
fonctionEn forme d'objet
Dans la forme d'une chaîne à l'aide de la fonction
_getStringFromTokenizedTransformAttributeObj
Ce qui est parfait parce que maintenant, lorsque vous retirez la rotation, votre élément peut revenir à l'endroit où il a été
Accordée, le code pourrait être plus propre et la fonction des noms plus concis, mais je voulais vraiment obtenir ce là-bas alors que d'autres puissent en bénéficier.
J'ai trouvé un moyen de faire parvenir à quelque chose de similaire en utilisant ceci:
cela vous donnera accès à la position x/y et la largeur/hauteur
Vous pouvez voir un exemple ici: https://bl.ocks.org/mbostock/1160929
this.getBBox();
... pas besoin pour le d3 sélectionner.