[英]Creating tooltip on maps using d3.js
I am expanding this example http://bl.ocks.org/tommyskg/6111032 我正在扩展此示例http://bl.ocks.org/tommyskg/6111032
I am working to add tooltip to point whenever I click on it: I use d3.JS 每当我单击它时,我都在努力添加指向的工具提示:我使用d3.JS
http://onehackoranother.com/projects/jquery/tipsy/#download 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});
};
But I am getting this error: Uncaught TypeError: Object [object Array] has no method 'tipsy' 但我收到此错误: 未捕获的TypeError:对象[对象数组]没有方法'tipsy'
It seems that I am using JQuery two times 看来我两次使用了JQuery
How canI cut this conflict ? 我该如何消除这种冲突?
Second way : 第二种方式:
I though that there is problems with map as the tooltip could be hiding behind map. 我虽然认为地图存在问题,因为工具提示可能隐藏在地图后面。 I made position of tooltip when it displays relative.
我在显示相对提示时确定了工具提示的位置。 I coded that manually.
我手动编码。
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)
But I couldn't reach results ? 但是我无法达到结果? Any ideas to solve this issue ?
有解决这个问题的想法吗?
Problem one 问题一
tipsy
is a jQuery
plugin, so you need to wrap the DOM element as a jQuery
object (not a d3
selection) to get access to the tipsy
function: tipsy
是一个jQuery
插件,因此您需要将DOM元素包装为jQuery
对象(而不是d3
选择),以访问tipsy
函数:
function info () { $(this).tipsy({live: true}); }
Problem two 问题二
I suspect that you are appending a div
to a svg
element. 我怀疑您是将
div
附加到svg
元素。 That is not allowed. 那是不允许的。
Also, I think the tooltips should show up just fine: http://bl.ocks.org/ilyabo/1373263 另外,我认为工具提示应该显示得很好: http : //bl.ocks.org/ilyabo/1373263
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.