D3, recuperare la posizione x di un elemento <g> e applicare multipla trasformare

Question

Con d3.js voglio trasformare la x di un group molte volte (ad es. Facendo clic su un pulsante di una causando una trasformazione per ogni clic), a partire da la posizione attuale del gruppo. Il problema è Non riesco a recuperare la x del gruppo e, anche se trovo, non riesco a trovare alcuna funzione incorporata che mi permetta di cambiare il x di un gruppo a partire dal suo attuale x. Mi sto perdendo qualcosa di importante? È molto strano che non riesca a ottenere lo x di un elemento aggiunto a uno "stage" SVG.

Il mio codice è il seguente (modificato per Lars): Ho creato i nodi nel modo in cui mi hai suggerito ieri (clonandoli).

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)"); 

     } 

    }); 

}); 

Answer 1

Ottenere e modificare la posizione di un elemento g è relativamente semplice. Ad esempio come questo:

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:

Se si dispone di un elemento DOM grezzo, selezionatelo con D3 prima:

var currentx = d3.transform(d3.select(this).attr("transform")).translate[0];