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>的子级。参见MDN foreignObject。这也是example。

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

D3.js工具提示不会在鼠标悬停时显示（或完全不显示）

1 个答案: