D3.js 鼠标悬停时不显示工具提示（或根本不显示）

Question

我有一张堪萨斯城的地图，其中包含每个街区的犯罪数量数据，我想添加一个工具提示，当您将鼠标悬停在地图上时显示每个地区的犯罪数量。到目前为止，这是我定义它的地方和方式：

  var map = d3.select('#map').selectAll('path')
    .data(data[0].features)
    .enter()
    .append('path')
    .attr('d', path)
    .style('stroke', 'black')
    .style('stroke-width', 0.75)
    .on('mouseover', function(d) {
        var tooltip = d3.select('#myTooltip');

        tooltip.style('display', 'block');
        tooltip.style('left', d3.event.pageX);
        tooltip.style('top', d3.event.pageY);

        tooltip.html(d.properties.neighbourhood + ': ' + d.count);
    })
    .on('mousemove', function(d) {
        // var tooltip = d3.select('#myTooltip');
        tooltip.style('left', d3.event.pageX);
        tooltip.style('top', d3.event.pageY);
    })
    .on('mouseleave', function(d) {
        // var tooltip = d3.select('#myTooltip');
        tooltip.style('display', 'none');
    });

我还有一个单独的 map.datum 来定义颜色。当我加载页面时，事件没有任何反应，网络检查器在事件下有一些奇怪的代码。

function(i) {
  var o = t.event;
  t.event = i;
  try {
    n.call(this, this.__data__, e, r)
  } finally {
    t.event = o
  }
}

三个都是这样。有没有人以前看过这个并且知道我可能做错了什么？

感谢任何帮助或建议！！

Answer 1

有几种可能性。首先，似乎在页面中定义 #myTooltip 的位置并不明显。

如果它嵌套在 <svg> 下，它必须是 <foreignObject> 的子项。另见 MDN foreignObject. Here's an example。

如果它在 svg 之外，可能是它被您的可视化隐藏了。查看开发工具以查看其属性在鼠标悬停期间是否按预期更改。

D3.js 鼠标悬停时不显示工具提示（或根本不显示）

D3.js Tooltip not displaying on mouseover (or at all)

javascript

visualization

d3.js