D3，检索 <g> 元素的 x 位置并应用多重变换

Question

使用 D3.js，我想从组的当前位置开始多次转换 group 的 x（例如，通过单击按钮 a 导致每次点击都发生转换）。问题是我无法检索组的 x，即使我找到它，我也找不到任何内置函数可以让我更改组的 x 从它当前的x。我错过了什么重要的东西吗？很奇怪，我无法获得添加到 SVG“舞台”的元素的 x。

我的代码如下（为 Lars 编辑）：我按照您昨天建议的方式创建了节点（克隆它们）。

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

获取和更改g 元素的位置相对简单。比如这样：

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

编辑：

如果你有一个原始的 DOM 元素，请先用 D3 选择它：

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