在D3 -tip工具提示上应用投影

Question

我有一张美国地图，上面标着城市。我正在尝试使用3d -tip为我的城市提供悬停工具提示。我遇到的问题是3d -tip没有考虑到投影，我不确定如何应用它。

我正在使用的投影:

var projection = d3.geo.mercator()
  .scale(150)
  .translate([width / 2, height / 1.5]);

我将它应用到我的圆元素中:

.attr("cx", function(d) {
  return projection([d.Longitude, d.Latitude])[0];
})
.attr("cy", function(d) {
  return projection([d.Longitude, d.Latitude])[1];
})

问题是3d -tip似乎没有采取x和y属性，它从发出事件的节点抓取它们，似乎没有考虑到它有投影应用;这对我来说没有意义

Answer 1

我通常用d3来做工具提示，附加一个绝对定位的div，并将其隐藏在body中。

然后将鼠标悬停在元素上，将div移动到鼠标指针的位置并取消隐藏。然后在mouseout事件发生时隐藏div。

这允许我控制X和Y以及工具提示的样式和文本。

这里有一个很好的例子:https://gist.github.com/biovisualize/1016860