D3, récupérer la position x d'un <g> élément et d'appliquer de multiples transformer

Avec D3.js j'ai envie de transformer le x d'un group à de nombreuses reprises (par exemple. en cliquant sur un bouton provoque une transformation pour chaque clic), à partir de la position actuelle du groupe. Le problème est je ne peux pas récupérer le x du groupe et, même si je la trouve, je ne trouve pas de fonction intégrée qui me permet de changer la x d'un groupe à partir de son niveau actuel x. Ai-je raté quelque chose d'important? C'est très étrange, je ne peux pas obtenir le x d'un élément ajouté à un SVG de la "scène".

Mon code est le suivant (sous la direction de Lars): j'ai créé les nœuds de la façon dont vous m'a suggéré hier (le clonage).

var m=[5,10,15,20,25,30];

var count=0;

d3.select('svg').on("mouseup", function(d, i){

     count+=0.5;

     var n = d3.selectAll(".myGroup");

     n.each(function(d,i) {

        if(i!=0){
            //here I need to know the current x of the current n element but I 
            //can't get it
            //this causes error "Uncaught TypeError: undefined is not a function"
            //var currentx = d3.transform(this.attr("transform")).translate[0];

            this.setAttribute("transform", "translate("+((100/m[i])*count)+",10)");

        }

     });

});

OriginalL'auteur Steekatsee | 2014-04-24

  1. 19

    Arriver en changeant la position d'un g élément est relativement simple. Par exemple, comme ceci:

    var g = d3.select("#myG");

//get x position
var currentx = d3.transform(g.attr("transform")).translate[0];

//set x position
g.attr("transform", "translate(" + (currentx + 100) + ",0)");

    Edit:

    Si vous avez un brut DOM élément, sélectionnez-le avec la D3 première:

    var currentx = d3.transform(d3.select(this).attr("transform")).translate[0];
    Salut Lars, j'ai mis à jour la question pour essayer d'expliquer les choses au mieux.
    J'ai mis à jour la réponse.
    Lars, merci beaucoup: j'ai pensé d3.selectAll(".myGroup") causé le fait qu'à l'intérieur du corps de la boucle this est identique au résultat de votre d3.select(this)
    Est-il possible d'obtenir une transformation de traduire ensemble avec .style()? J'ai besoin de correspondre à une animation définie dans la fiche CSS, et à l'aide de .translate() l'animation est hors de synchronisation.
    D3v4 "La d3.méthode de transformation a été supprimé." github.com/d3/d3/blob/master/CHANGES.md

    OriginalL'auteur Lars Kotthoff