Tôi có một tập hợp các phần tử lồng nhau (SVG). Phần tử gốc là biểu đồ và trẻ em là các phần tử trong biểu đồ (đường kẻ, trục, v.v.). ví dụ đơn giản:d3.on ("di chuột") sự kiện không hoạt động với các phần tử SVG lồng nhau
<g transform="translate(80,10)" id="mainGraph">
<g class="Line">
<path d="....."></path>
</g>
</g>
Vấn đề của tôi là nếu tôi gắn một mouseover/sự kiện MouseMove (với D3.on ("mouseover") chẳng hạn) để các yếu tố mainGraph, nó chỉ gây ra nếu tôi di chuyển chuột lên một của các phần tử con.
Một trong những điều tôi đọc là có ưu tiên các phần tử sau, vì vậy tôi đã thêm .style ("pointer-events", "none") vào tất cả các phần tử con, nhưng điều đó không hiệu quả.
Sử dụng 'g' nên làm việc nếu bạn thiết lập kích thước của nó một cách rõ ràng. –
Một phần tử 'g' (không giống như' div') chỉ là một thùng chứa không có hình dạng, và do đó không có kích thước. Vì vậy, nếu bạn muốn di chuột qua để áp dụng cho một khu vực hình chữ nhật, điều này bạn sẽ cần phải xác định nội dung hình chữ nhật như này 'rect'. Tuy nhiên, một tinh lọc hữu ích là sử dụng fill: none và pointer-events: tất cả các kiểu. – mbostock
@mbostock có thực hiện bất kỳ sự khác biệt nào nếu sử dụng các sự kiện con trỏ trực tiếp trên phần tử so với cài đặt nó trong thuộc tính CSS của nó không? Phần tử '' 'path''' bên trong' '' g''' có hoạt động giống nhau không? – amenadiel