Javascript 使用d3.js在地图上创建工具提示

我正在扩展这个例子

每当我点击它时，我都会给它添加工具提示：我使用d3.JS

但我得到了这个错误： 未捕获类型错误：对象[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

函数：

functioninfo（）{$（this）.tipsy（{live:true}）；}

问题二

我怀疑您正在将

div

追加到

svg

元素。这是不允许的

---

此外，我认为工具提示应该显示得很好：

感谢80%的工作！但我没有看到工具提示，我在info函数中添加了“console.log（“Hello”）；”以查看我是否正确调用了该函数，它正在控制台上打印。似乎我在CSS方面遇到了问题！工具提示可能隐藏在地图后面。有什么想法吗？是的！工具提示应该可以找到，但有一个小问题，当我单击工具提示时，它不会出现，在移动鼠标并返回到点后，它就会出现。我正在使用.on（“click”，info）@user3047512您想在所有元素上激活

tipsy

，并将它们上的

trigger

设置为

manual

：

trigger:'hover'//工具提示是如何触发的-hover | focus | manual

。然后单击，只需调用

.tipsy（{show:true}）

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)