D3, get the x position of the <g> element and apply the multiple conversion

Question

With D3.js, I want to repeatedly convert x from group (for example, by pressing the a button, causing a conversion for each click), starting from the current position of the group. The problem is that I cannot get x from the group, and even if I find it, I cannot find a built-in function that allows me to change the x group, starting from its current x . Did I miss something important? It is very strange that I can not get the x element added to the "SVG" stage.

My code is as follows (edited for Lars): I created the nodes as you suggested me yesterday (cloning them).

 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

Getting and changing the position of the element g relatively simple. For example, for example:

 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:

If you have a raw DOM element, first select it with D3:

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