Remplacer d3.transformer en D3 v4

si vous tirez dans d3 v4 par npm, vous pouvez importer le src/transform/parse le fichier directement et appeler parseSvg:

// using es2015 modules syntax
import { parseSvg } from "d3-interpolate/src/transform/parse";

parseSvg("translate(20, 20)");

Sur les éléments qui ont le d3.js zoom écouter sur eux -- 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:

var self = this;
var t = d3.zoomTransform(self.svg.node()); 

// t = {k: 1, x: 0, y: 0} or your current transformation values

renvoie les mêmes valeurs que lors de l'appel d3.event.transform à l'intérieur de la fonction d'événement zoom elle-même.

appel d3.event.transform à l'extérieur de la fonction d'événement de zoom fera une erreur: Uncaught TypeError: Cannot read property 'transform' of null

je dois utiliser d3.zoomTransform pour permettre de panoramique et zoom à partir de boutons à l'extérieur du graphique.

je suis un peu en retard à la fête, mais j'avais un code qui m'était bénéfique, j'espère que ça vous aidera aussi.

Le code ci-dessus par @altocumulus est assez complet et fonctionne comme un charme. Cependant, il ne répondait pas tout à fait à mes besoins puisque je faisais les calculs à la main et avait besoin de modifier certaines propriétés de transformation aussi indolore que possible.

Ce n'est pas la solution pour tout le monde, mais c'était parfait pour je.

function _getTokenizedTransformAttributeValue(transformStr) {
    var cleanedUpTransformAttrArr = transformStr.split(')', ).slice(0,-1);

    return cleanedUpTransformAttrArr.reduce(function(retObj, item) { 
        var transformPair = item.split('(');

        retObj[transformPair[0]] = transformPair[1].split(',');

        return retObj;
    }, {});
}

function _getStringFromTokenizedTransformAttributeObj(transformAttributeObj) {
    return _.keys(transformAttributeObj).reduce(function(finalStr, key) {
        // wrap the transformAttributeObj[key] in array brackets to ensure we have an array
        // join will flatten the array first and then do the join so [[x,y]].join(',') -> "x,y"
        return finalStr += key + "(" + [transformAttributeObj[key]].join(',') + ")"; 
     }, '');
}

ce qui est vraiment génial avec la première fonction, c'est que je peux modifier manuellement une propriété spécifique (par exemple la rotation), et ne pas avoir à me soucier de la façon dont elle affecte translate ou quoi que ce soit d'autre (lors de la rotation autour d'un point), alors que lorsque je me fie à l'intégré ou même d3.transform méthodes de consolider toutes les propriétés en une seule valeur.

pourquoi c'est cool?

Imaginez un peu de HTML

<g class="tick-label tick-label--is-rotated" transform="translate(542.8228777985075,0) rotate(60, 50.324859619140625, 011.402383210764288)" style="visibility: inherit;"></g>

en utilisant d3.transformer j'obtiens:

sous forme d'objet

jr {rotate: 59.99999999999999, translate: [577.8600589984691, -37.88141544673796], scale: [1, 1], skew: 0, toString: function} 

Dans la forme d'une chaîne

"translate(577.8600589984691,-37.88141544673796)rotate(59.99999999999999)skewX(0)scale(1,1)"

Ce qui est mathématiquement correct, mais rend difficile pour moi de simplement supprimer l'angle de rotation et la traduction qui a dû être introduite pour faire tourner cet élément autour d'un certain point.

à l'Aide de mon _getTokenizedTransformAttributeValue function

sous forme d'objet

{translate: ["542.8228777985075", "0"],  rotate: ["60", " 50.324859619140625", " 011.402383210764288"]}

Dans la forme d'une chaîne utilisant la fonction _getStringFromTokenizedTransformAttributeObj

"translate(542.8228777985075,0)rotate(60, 50.324859619140625, 011.402383210764288)"

Ce qui est parfait parce que maintenant quand vous supprimez la rotation, votre élément peut revenir à l'endroit où il était

D'accord, le code pourrait être plus propre et les noms de fonction 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:

d3.select(this).node().getBBox();

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

j'ai trouvé une solution un peu plus simple que cela.

selection.node().transform.baseVal[0].matrix

dans cette matrice, vous avez les cordinates e et F sont équivalents à 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 utiliser cela pour l'objet sans transformation préalable! (la liste sera vide) Ou si vous avez fait beaucoup de traduction à l'objet de la dernière position sera la dernière élément de baseVal liste.