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


但是我无法达到结果?有解决这个问题的想法吗?

最佳答案

问题一

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

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


问题二

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

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

07-24 09:39
查看更多