D3, truy lục vị trí x của phần tử <g> và áp dụng nhiều biến đổi

Question

Với D3.js tôi muốn biến đổi x của group nhiều lần (ví dụ: bằng cách nhấp vào nút gây biến đổi cho mỗi nhấp chuột), bắt đầu từ vị trí hiện tại của nhóm. Vấn đề là Tôi không thể truy xuất x của nhóm và, ngay cả khi tôi tìm thấy, tôi không thể tìm thấy bất kỳ chức năng tích hợp nào cho phép tôi thay đổi x của nhóm bắt đầu từ x hiện tại. Tôi có thiếu cái gì quan trọng không? Nó rất lạ Tôi không thể có được x của phần tử được thêm vào "giai đoạn" SVG.

Mã của tôi là như sau (được chỉnh sửa cho Lars): Tôi đã tạo các nút theo cách bạn đã đề xuất cho tôi hôm qua (nhân bản chúng).

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

Bắt và thay đổi vị trí của thành phần g tương đối đơn giản. Ví dụ như thế này:

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:

Nếu bạn có một phần tử DOM liệu, chọn nó với D3 đầu tiên:

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