d3.on ("di chuột") sự kiện không hoạt động với các phần tử SVG lồng nhau

Question

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:

<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ả.

Answer 1

Một cách tiếp cận là để thêm một hình chữ nhật lấp đầy toàn bộ bề mặt là yếu tố đầu tiên để bắt sự kiện chuột mà không bị bắt bởi các yếu tố bổ sung sau:

something.append('svg:rect') 
    .attr('width', width) // the whole width of g/svg 
    .attr('height', height) // the whole heigh of g/svg 
    .attr('fill', 'none') 
    .attr('pointer-events', 'all') 
    .on('mouseover', function() { 
     // do something 
    }  
    }); 

Tôi tin rằng <g> yếu tố (mainGraph trong ví dụ của bạn) chỉ là một vùng chứa, không phải là một hình dạng thực tế có thể nhận các sự kiện chuột.

Bạn có thể thêm trình xử lý sự kiện chuột trên chính phần tử svg, nhưng tôi không nghĩ rằng <g> sẽ hoạt động.

Answer 2

Ngoài việc sử dụng phần tử rect, cần có thuộc tính CSS được đặt như thế này pointer-events: all; để các sự kiện được kích hoạt.

Answer 3

Tôi cũng gặp phải sự cố tương tự.
Giải pháp là thêm thuộc tính css để yếu tố phụ huynh

pointer-events: stroke; 

hoặc

pointer-events: visibleStroke;