title: D3, retrieve the x position of a <g> element and apply multiple transform
body: <p>With D3.js I want to transform the <code>x</code> of a <code>group</code> many times (eg. by clicking a button a causing a transform for every click), starting from the current position of the group. Problem is <em>I can't retrieve the x of the group</em> and, even if I find it, I can't find any built-in function that lets me change the <code>x</code> of a group starting from its current <code>x</code>. Am I missing something important? It's very strange I can't get the <code>x</code> of an element added to an SVG "stage".</p>
  
  <p>My code is the following (edited for Lars): I created the nodes the way you suggested me yesterday (cloning them).</p>
  
  <pre><code>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)");
  
          }
  
       });
  
  });
  </code></pre>