1

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

我正在查看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 选择器会触发工具提示——因此提示正确加载（也没有控制台错误）。我的“.precinct”选择器也是正确的，因为我可以编写一个 css 规则 .precinct{style} 并且它会设置 precinct svgs 的样式。那么我错过了什么？它应该选择类区域的所有内容并添加工具提示，就像它选择类按钮的所有内容并添加工具提示一样。正确的？

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

4

1 回答 1

2

我让它在你的小提琴上运行良好（在将库代码和 css直接转储到小提琴后，因为你不能使用 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 中有效（尽管在形状奇特的路径上看起来很奇怪，因为位置偏移返回的是完全包含路径的矩形的顶角），但偏移属性不是标准接口的一部分SVG 元素，因此它在某些浏览器中可能根本不起作用（相反，您会在窗口的左上角显示工具提示）。

您可能想查看专门为 d3 和 SVG 编写的工具提示库，例如 d3.tip库。或者，如果你想自己做，我整理了一个相当全面的例子，展示了在 SVG 元素上定位工具提示的不同方式。

于 2014-03-15T00:20:07.087 回答