Dữ liệu D3: Sự kiện OnClick trên Bong bóng

Question

Tôi đang theo dõi tài liệu về datamaps và tôi đang cố gắng đặt trình nghe onClick cho các bong bóng tôi đang hiển thị trên svg. Bây giờ, svg div có sub thẻ sau đây:

<svg> 
    <g id class="datamaps-subunits">..</g> 
    <g id class="bubbles">..</g> 
</svg> 

Các tài liệu nói điều này nên được thực hiện theo cách sau, cho các quốc gia nêu trên bản đồ:

done: function(datamap) { 
      datamap.svg.selectAll('.datamaps-subunits').on('click', function() { 
       alert("hello"); 
      }); 
     } 

Và tác phẩm này tốt, trong khi cố gắng nhấp vào các vùng cụ thể trên bản đồ.

Đang cố gắng để đính kèm người nghe cùng bong bóng lớp không có gì ..

done: function(datamap) { 
      datamap.svg.selectAll('.bubbles').on('click', function() { 
       alert("hello"); 
      }); 
     } 

Answer 1

Vào thời điểm done chạy, bubbles chưa được nào được bổ sung từ bubbles là một plugin.

new Datamap trả về một đối tượng với một lựa chọn d3 tại svg:

var map = new Datamap({...}); 
//add bubbles 
map.bubbles(bubbleData); 
//handle bubble clicks 
map.svg.selectAll('.bubbles').on('click', function() {...}); 

Điều đó sẽ làm việc cho các lô hàng đầu tiên của bong bóng.

Nếu bạn đang tự động thêm vào bong bóng và không muốn thiết lập lại các thính giả, bạn có thể sử dụng đoàn sự kiện jQuery để xử lý các bong bóng năng động:

$(map.svg[0][0]).on('click', '.bubbles', function(e) { 
    //handle click here as well 
});