Question

我正在尝试使用d3向我的地图添加工具提示 - 根据此帖Show data on mouseover of circle的建议

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

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

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

Answer 1

我把你的小提琴正常工作（将library code & 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库。或者，如果你想自己做，我把fairly comprehensive example of the different ways of positioning tooltips over SVG elements。

放在一起

为什么醉酒和qtip没有选择我的svg元素？

1 个答案: