javascript - 使用 d3.js 在 map 上创建工具提示

Question

我正在扩展这个例子 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)

但我无法获得结果？有解决这个问题的想法吗？

Answer 1

问题一

tipsy 是一个 jQuery 插件，因此您需要将 DOM 元素包装为 jQuery 对象(不是 d3 选择)以访问 tipsy 函数:

function info () { $(this).tipsy({live: true}); }

问题二

我怀疑您将 div 附加到 svg 元素。这是不允许的。

此外，我认为工具提示应该显示得很好:http://bl.ocks.org/ilyabo/1373263