[英]Creating tooltip on maps using d3.js
我正在扩展此示例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:对象[对象数组]没有方法'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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.