在firefox，IE中d3上的糊涂工具提示定位

Question

我正在绘制d3 line graphs和tipsy tooltips附加到圈子。

工具提示在Chrome / Safari中正常工作但在Firefox和IE浏览器中，当您将鼠标悬停在一个点上时，相应的工具提示会出现，它会显示在屏幕左上角的图形/ SVG元素之外（html）元素）而不是点的旁边。

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

    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元素上，但没有说明应该是这样的。

你需要修改tipsy才能跨浏览器或让作者去做。使用getTransformToElement和/或getBBox可能就是所需要的。