Lựa chọn trong D3: cách sử dụng parentNode.appendChild?

Question

Tôi muốn xử lý các phần tử SVG chồng chéo trong D3.js bằng cách sử dụng this method from StackOverflow.

Tuy nhiên, do bản chất của mã của tôi, tôi muốn sử dụng bộ chọn D3 thay vì this để thêm lại phần tử vào DOM. Câu hỏi của tôi là: làm thế nào tôi có thể sử dụng một bộ chọn D3 để có được các nút có liên quan?

Đây là cách ví dụ ban đầu thực hiện nó:

this.parentNode.appendChild(this); 

Đây là nỗ lực của tôi, mà không thành công với "lỗi chưa gặp: Không thể gọi phương thức 'appendChild' không xác định":

var thisNode = d3.select("#" + id); 
thisNode.parentNode.appendChild(thisNode); 

này JSFiddle (được điều chỉnh từ the original example) minh họa sự cố: http://jsfiddle.net/cpcj5/

Cách lựa chọn D3 của tôi khác với this trong ví dụ ban đầu? Tôi đã thử sử dụng thisNode.node().parentNode.appendChild(thisNode) nhưng điều đó cũng không thành công.

Answer 1

.parentNode method là dành cho phần tử DOM, không phải là d3 selection.

Để truy cập phần tử DOM từ lựa chọn d3 hơi phức tạp và thường có những cách tốt hơn để đạt được những gì bạn muốn làm. Bất kể, nếu bạn có một yếu tố duy nhất được lựa chọn, nó sẽ là mục đầu tiên và duy nhất trong mục đầu tiên của một d3.selection - tức là bạn cần phải truy cập vào nó như vậy:

var someIdDOMelement = d3.select("#someid")[0][0]; 

Một ví dụ đã chỉnh sửa của ban đầu của bạn sử dụng này: http://jsfiddle.net/cpcj5/1/

Nếu bạn có id và đặc biệt muốn để có được những phần tử DOM, tôi chỉ cần đi với getElementById:

var someIdDOMElement = document.getElementById("someid") 

nhìn vào d3 documentation for binding events using on, chúng ta có thể thấy rằng, trong phạm vi chức năng bạn bind, th Biến e this là phần tử DOM cho sự kiện được kích hoạt. Vì vậy, khi xử lý xử lý sự kiện trong d3, bạn chỉ có thể sử dụng this để lấy phần tử DOM từ bên trong một hàm ràng buộc. Tuy nhiên, hãy nhìn vào mã của bạn, tôi nghĩ việc gắn lại nút bằng cách sử dụng các phương thức javascript ban đầu dễ dàng hơn, sau đó tạo một lựa chọn d3 bằng cách sử dụng d3.select trên phần tử dom được gắn với this. Đây là cách mã gốc thực hiện: http://jsfiddle.net/cpcj5/3/

Nếu bạn gặp bất kỳ khó khăn nào do điều này, vui lòng nhận xét để tôi có thể giải quyết chúng.

Answer 2

Bạn cũng có thể sử dụng selection.node() trong D3:

var thisNode = d3.select("#" + id); 
thisNode.node().parentNode.appendChild(thisNode.node());