我正在扩展这个例子 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});
};
但是我收到了这个错误: Uncaught TypeError: Object [object Array] 没有方法 'tipsy'
看来我是用了两次JQuery
我怎样才能减少这种冲突?
第二种方式:
我认为 map 存在问题,因为工具提示可能隐藏在 map 后面。当它显示相对时,我做了工具提示的位置。我手动编码。
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
关于javascript - 使用 d3.js 在 map 上创建工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20354331/