Truy cập các thuộc tính phần tử d3.js từ datum?

Question

Tôi đang cố gắng truy cập các thuộc tính cy cx & cy của một số vòng tròn svg cụ thể mà tôi đã vẽ lên màn hình bằng cách sử dụng hàm .data() của d3.js, bất kỳ ai có thể trợ giúp không? Mã đang cố gắng truy cập vào nó ở bên dưới.

d3.selectAll(".mynode").each(function(d, i){ 
    if(d.someId == targetId){ 
    console.log(d.attr("cx")); // just trying to demo my point, doesn't work 
    } 
} 

Tôi khá mới để d3.js & javascript, vì vậy tôi không chắc chắn nếu tôi đang tiếp cận trở lại này để phía trước anyways hoặc có lẽ tôi có thể đã bỏ lỡ một giải pháp sẵn có?

Answer 1

Mã của bạn đang cố gắng để có được một thuộc tính svg từ một mục dữ liệu, khi những gì bạn thực sự muốn là nhận được rằng thuộc tính từ các yếu tố svg DOM, như trong:

console.log(d3.selectAll(".mynode").attr("cx")); 

này sẽ chỉ cho bạn thuộc tính cho phần tử không null đầu tiên của lựa chọn của bạn; Bạn cũng có thể filter lựa chọn của bạn để có được những phần tử DOM bạn đang tìm kiếm:

console.log(d3.selectAll(".mynode").filter(_conditions_).attr("cx")); 

Hoặc, nếu bạn muốn truy cập các thuộc tính của tất cả các yếu tố được lựa chọn, sử dụng this trong mỗi chức năng của bạn:

d3.selectAll(".mynode").each(function(d, i){ 
    if(d.someId == targetId){ 
    console.log(d3.select(this).attr("cx")); 
    } 
} 

Answer 2

Phương pháp lọc trong câu trả lời được chấp nhận là chính xác. Cách tiếp cận thứ hai trong câu trả lời được chấp nhận (sử dụng .each) là không chính xác và có lỗi giống như người hỏi đang tạo: nếu .data() không được gọi (trường hợp ở đây), thì đối số đầu tiên d được chuyển tới .each sẽ không được xác định (và không phải là "nút dom hiện tại", vì tất cả người mới, bao gồm cả bản thân tôi, sẽ mong đợi); nút dom hiện tại bạn nhận được thông qua d3.select (điều này), chính xác trong câu lệnh if ở cuối cùng - lỗi nằm trong điều kiện thử nghiệm nếu. Phiên bản chính xác theo sau.

d3.selectAll(".mynode").each(function(d,i){ 
    var elt = d3.select(this); 
    if (elt.attr("id") == "yourTargetIdGoesHere"){ 
     console.log(elt.attr("cx")); 
    } 
}); 

fiddle: fiddle (có chứa mã cho cả hai phiên bản, tức là lọc và mỗi)

UPDATE: Câu trả lời của tôi đã giả định rằng bạn không sử dụng .data(), vì bạn không đưa ra mã vì điều đó; sau đó tôi thấy rằng bạn đã viết rằng bạn đã sử dụng .data()

trong trường hợp đó, tùy thuộc vào cấu trúc dữ liệu của bạn, thay thế d.attr ("cx") theo d.cx đơn giản có thể hoạt động.

Answer 3

Có cách thậm chí đơn giản hơn: (cung cấp chỉ số i được đưa ra)

d3.selectAll("circle")[0][i].attributes.cx.value 

vì nó có thể được nhìn thấy here.