D3，檢索<g>元素的x位置並應用多重變換

Question

隨着D3.js我想多次變換x的group（例如通過單擊導致每次點擊變換的按鈕），從該組的當前位置。問題是我無法檢索組的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];