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 用于定义颜色。 当我加载页面时，事件中没有任何反应，并且 Web 检查器在事件下有一些奇怪的代码。

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>的子<foreignObject> 。 请参阅MDN foreignObject 。 这里还有一个例子。

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