Ngăn chặn thừa kế dữ liệu không mong muốn bằng selection.select

Question

Trong d3, selection.select có tác dụng phụ của việc kế thừa dữ liệu từ các nút cha trong lựa chọn ban đầu. Điều này là mong muốn trong các tình huống mà dữ liệu được chia sẻ giữa các nút cha và con để dữ liệu cập nhật được liên kết với phụ huynh sẽ được đẩy tới đứa trẻ mà không yêu cầu tham gia dữ liệu ở mọi cấp.

Nhưng còn những tình huống mà ở đó không có mối quan hệ rõ ràng giữa dữ liệu bị ràng buộc với phụ huynh và dữ liệu bị ràng buộc với đứa trẻ? Trong trường hợp này, selection.select có thể xảo quyệt vì chỉ đơn giản bằng cách chọn một nút mà bạn làm cho dữ liệu của nút đó bị ghi đè với dữ liệu gốc không liên quan.

Kỹ thuật tốt nhất để tránh điều này là gì? Tôi có thể nghĩ đến một vài lựa chọn nhưng không có vẻ gì tuyệt vời:

1. Luôn sử dụng selection.selectAll Luôn sử dụng bất kỳ nơi nào thừa kế dữ liệu tiềm ẩn. Tuy nhiên, đây không phải là lý tưởng vì nó làm cho việc sử dụng selection.select không phù hợp với d3.select được sử dụng đơn giản để chọn một nút riêng lẻ (chính xác những gì tôi muốn làm với selection.select).

2. Sử dụng d3.select với descendents selector thay vì selection.select để cách ly một nút cụ thể. Điều thuận tiện về việc sử dụng selection.select là nó ngầm định hạn chế lựa chọn cho con cháu của lựa chọn bắt đầu. Đạt được điều này với bộ chọn không phải là gần như là tốt đẹp.

Cá nhân tôi không phải là người hâm mộ lớn có hiệu ứng phụ DOM trong một dạng cụ thể của một số chức năng được sử dụng phổ biến nhất trong API. Tôi nghĩ rằng tôi sẽ tìm thấy nó dễ dàng hơn để hiểu nếu có một cuộc gọi rõ ràng như selection.update(selector) để đối xứng với selection.append và selection.insert.

Nhưng trong API hiện tại, tôi tự hỏi liệu có một số cơ chế khác có thể được sử dụng để phá vỡ kế thừa có hiệu quả khi sử dụng selection.select không?

Answer 1

Tôi đã kết thúc gửi sự cố trên D3 Github: https://github.com/mbostock/d3/issues/1443. Không có bất kỳ giải pháp nào nhưng có một cuộc thảo luận thú vị (tôi nghĩ) về vấn đề này. Ở dưới cùng rất, Mike không đưa ra một công việc xung quanh đó sẽ làm việc, mà tôi sẽ dán vào đây để tiện theo dõi:

Không phải là một câu trả lời tuyệt vời, nhưng một cách để bạn có thể ngăn chặn dữ liệu thừa kế là phải có một nút trung gian mà không có dữ liệu bị ràng buộc.

var intermediary = selection.append("div") 
    .datum(function() { return null; }); 

Sau đó, bất kỳ lựa chọn nào từ trung gian sẽ không truyền dữ liệu từ lựa chọn gốc. Nhưng tất nhiên, nút trung gian trong DOM có phần không may.

Answer 2

Bạn có thể sử dụng:

d3.select(selection.node().querySelector(selector)) 

Nhìn thấy nó trong hành động trong jsfiddle này mà kéo dài nguyên mẫu lựa chọn với một phương pháp selectWithoutDataPropagation().