我正在扩展这个例子
http://bl.ocks.org/tommyskg/6111032
每当我单击它时,我都在努力添加指向的工具提示:我使用d3.JS
http://onehackoranother.com/projects/jquery/tipsy/#download
// Add a circle.
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("click",info)
function info(){
d3.select(this).tipsy({live: true});
};
但我收到此错误:
未捕获的TypeError:对象[object Array]没有方法'tipsy'
看来我两次使用了JQuery
我该如何消除这种冲突?
第二种方式:
我虽然认为地图存在问题,因为工具提示可能隐藏在地图后面。我在显示相对提示时确定了工具提示的位置。我手动编码。
div.tooltip {
color: #222;
background: #fff;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
opacity: 0.9;
position: relative;
}
var tooltip = d3.select("#map").append("div")
function info(){
tooltip.attr("class", "tooltip");
};
marker.append("svg:circle")
.attr("r", 4.5)
.attr("cx", padding)
.attr("cy", padding)
.on("click",info)
但是我无法达到结果?有解决这个问题的想法吗?
最佳答案
问题一tipsy
是jQuery
插件,因此您需要将DOM元素包装为jQuery
对象(而不是d3
选择),以访问tipsy
函数:
function info () { $(this).tipsy({live: true}); }
问题二
我怀疑您是将
div
附加到svg
元素。那是不允许的。另外,我认为工具提示应该显示得很好:http://bl.ocks.org/ilyabo/1373263