javascript - 为什么 tipsy 和 qtip 不选择我的 svg 元素？

Question

我正在尝试使用 d3 将工具提示添加到我的 map 中——根据这篇文章的建议 Show data on mouseover of circle

我正在查看 this Bostock 教程中的示例。

我的 SVG 看起来像这样:

    <svg width="503" height="629">
         <g class="precincts">
              <path class="O precinct" title="52-47" id="1-1"          d="8895922,383.750108730128L128.22787341161165,383....403.91773820327217L135.3001918293303,404.0915875970313Z">
              </path>
                  ...
              <path> 
              </path>
         </g>
    </svg>

我的文档加载函数中有这个 jquery，它是在我调用加载 SVG 之后调用的:

 $('.button').tipsy({
    gravity: 'w',
    title: function() {
        return 'Hi there!';
    }
});
$('.precinct').tipsy({
    gravity: 'w',
    title: function() {
        alert("here");
        return 'Hi there!';
    }
});

.button 选择器触发工具提示——所以 tipsy 正在正确加载(也没有控制台错误)。我的“.precinct”选择器也是正确的，因为我可以编写一个 css 规则 .precinct{style} 并且它将设置 precinct svgs 的样式。那我错过了什么？它应该选择类区域的所有内容并添加工具提示，其方式与选择类按钮的所有内容并添加工具提示的方式相同。对吧？

我在使用 simpletip 工具提示库时遇到了同样的问题。

Answer 1

我在你的 fiddle 上运行良好(在将 library code & css 直接转储到 fiddle 中之后，因为你不能将 github 用作外部资源的 CDN):

http://jsfiddle.net/8gJC8/1/ (可能需要一段时间才能加载)

但是，定位工具提示将是一个问题。 Tipsy 使用 offset 属性从元素中获取位置:

            var pos = $.extend({}, this.$element.offset(), {
                width: this.$element[0].offsetWidth,
                height: this.$element[0].offsetHeight
            });

这种方法在 Chrome 中有效(尽管它在形状奇怪的路径上看起来很奇怪，因为位置偏移返回的是完全包含路径的矩形的顶 Angular )，但偏移属性不是SVG 元素的标准界面，因此它可能在某些浏览器中根本不起作用(相反，您会在窗口的左上角看到工具提示)。

您可能想查看专门为 d3 和 SVG 编写的工具提示库，例如 d3.tip图书馆。或者，如果你想自己做，我整理了一个 fairly comprehensive example of the different ways of positioning tooltips over SVG elements .