Mẹo định vị toolyip trên d3 trong firefox, IE

Question

Tôi đang vẽ d3 line graphs và tipsy tooltips được gắn vào vòng kết nối.

Chú giải công cụ hoạt động tốt trong Chrome/Safari nhưng trong Firefox và IE khi bạn di chuột qua một điểm, trong khi chú giải công cụ tương ứng xuất hiện bên ngoài biểu đồ/phần tử SVG ở góc trên bên trái của màn hình (phần tử html) thay vì bên cạnh điểm.

Đây là cách tôi đang gắn các tooltip:

jQuery('g circle').tipsy({ 
     gravity: 'w', 
     html: true, 
     title: function() { 
      return this.textContent; 
     } 
    }) 

Bất cứ lời khuyên về những gì tôi đang làm sai sẽ được nhiều đánh giá cao.

Answer 1

mẹo sử dụng bù đắpWidth và offsetHeight trên các phần tử. Nó giả định rằng những thứ đó hoạt động trên các phần tử SVG, tiếc là giả định không chính xác bên ngoài Chrome/Safari.

Đặc điểm CSSOM cho biết offsetWidth/offsetHeight là thuộc tính phần tử html. Dường như Chrome/Safari đã đặt các yếu tố này trên các phần tử SVG của họ nhưng không có đặc điểm nào cho biết rằng đó là trường hợp.

Bạn cần phải sửa mẹo để trở thành trình duyệt chéo hoặc làm cho tác giả làm điều đó. Sử dụng getTransformToElement và/hoặc getBBox có lẽ là những gì cần thiết.

Answer 2

This bản vá thêm hỗ trợ SVG phù hợp vào Tipsy.