在Firefox，IE中d3上的提示工具提示定位

Question

我正在画d3 line graphs 和tipsy tooltips 附在圆圈上。

工具提示在 Chrome/Safari 中可以正常工作，但在 Firefox 和 IE 中，当您将鼠标悬停在某个点上时，虽然确实出现了相应的工具提示，但它会显示在屏幕左上角的图形/SVG 元素之外（html element) 而不是点旁边。

这就是我附加工具提示的方式：

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

任何关于我做错了什么的建议将不胜感激。

Answer 1

This 补丁为 Tipsy 添加了适当的 SVG 支持。

Answer 2

tipsy 在元素上使用 offsetWidth 和 offsetHeight。它假设这样的事情适用于 SVG 元素，不幸的是，这种假设在 Chrome/Safari 之外是不正确的。

CSSOM 规范说 offsetWidth/offsetHeight 是 html 元素属性。似乎 Chrome/Safari 已将这些放在其 SVG 元素上，但没有规范说明应该如此。

您要么需要修复醉酒以成为跨浏览器，要么让作者去做。可能需要使用 getTransformToElement 和/或 getBBox。