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

Question

使用D3.js，我想多次转换一个group的x（例如，通过点击按钮使每次点击都会造成一次变换），从该组的当前位置开始。问题是，我无法检索到该组的x，即使我找到了它，我也找不到任何内置函数让我从其当前的更改group的。我是否遗漏了重要的东西？很奇怪我无法获得添加到SVG“stage”的元素的值。

我的代码如下（为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)");

        }

     });

});

- Steekatsee

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];

- Lars Kotthoff

---

嗨，Lars，我更新了问题，试图更好地解释事情。 - Steekatsee

Lars，非常感谢：我以为 d3.selectAll(".myGroup") 这么做会导致循环体内的 this 与你的 d3.select(this) 的结果相同。 - Steekatsee

能否使用.style()获取变换平移集？我需要匹配Leaflet CSS中的动画集，但使用.translate()会导致动画不同步。 - Sebastian Thomas

使用.style("transform")。 - Lars Kotthoff

我认为仅仅改变g元素相对于自身的位置是有用的。这种方法不会给出g元素相对于其父元素的相对x位置。 - RezKesh

D3v4中的"d3.transform方法已被移除。" - Arlo