Question

我有一张美国地图，上面绘有城市。我正在尝试使用d3-tip在悬停时向我的城市提供工具提示。我遇到的问题是d3-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];
})

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

Answer 1

我通常使用d3附加一个具有绝对定位的div并将其隐藏在体内来进行工具提示。

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

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

以下是一个很好的例子：https://gist.github.com/biovisualize/1016860

D3将投影应用于d3-tip工具提示

1 个答案: