Angular D3 TopoJSON：鼠标悬停工具提示坐标错误

Question

我正在尝试在 Angular 构建的页面上使用 D3，为美国 TopoJSON 地图中的县实现鼠标悬停时的 div 工具提示。

我已经尝试了 D3 鼠标悬停事件中可用的 x/y 坐标的每种组合，以及在线建议的一些组合（D3.pointer、Element.getBoundingClientRect 等）。 ），但无论我做什么，工具提示似乎都落在不正确的坐标处，与我的鼠标偏移，并且在 svg 上的每个位置不一定有相同的度数。

有没有正确的方法来做到这一点？代码示例如下。相关部分位于 this.counties.on("mouseover", ...) 内。

HTML

<div class="row g-0">
  <div class="container" id="mapContainer">
    <svg id="map"></svg>
    <div id="tooltip">TESTING</div>
  </div>
</div>

CSS

#mapContainer {
  position: relative;
}
#tooltip {
  position: absolute;
}

TypeScript

    this.svg = d3.select("#map")
      .attr("preserveAspectRatio", "xMidYMid meet")
      .attr("viewBox", "0 0 960 600")
      .attr("height", "100%")
      .attr("width", "100%")

    this.g = this.svg.append("g")
      .attr("id", "g")

    this.zoom = d3.zoom()
      .scaleExtent([1, 8])
      .translateExtent([[0, 0], [960, 600]])
      .on("zoom", (event, d) => {
        let {transform} = event
        this.g.attr("transform", transform)
        this.g.attr("stroke-width", 1 / transform.k)
      })

    this.counties = this.g.append("g")
      .attr("class", "county")
      .attr("fill", "#DFDFDF")
      .attr("stroke", "#FFFFFF")
      .attr("stroke-linejoin", "round")
      .attr("stroke-width", "0.25")
      .selectAll('path')
      .data(topojson.feature(this.topography, this.topography["objects"]["counties"])["features"])
      .join("path")
      .attr("id", function(d) {return d["id"]})
      .attr('d', this.path)
      .attr("fill", "#DFDFDF")
      .on("mousemove", (event, d) => {

        d3.select("#tooltip")
          .style("left", `${d3.pointer(event)[0]}px`)
          .style("top", `${d3.pointer(event)[1]}px`)

      })

      // PER DERISTNOCHDA'S SUGGESTION
      .on("mousemove", (event, d) => {

        d3.select("#tooltip")
          .style("left", `${event.pageY}px`)
          .style("top", `${event.pageX}px`)

      })

一些结果屏幕截图，例如，当光标位于右上角的缅因州时：

当光标位于亚利桑那州时左下角：

Answer 1

使 div#tooltip 相对于页面（而不是其父页面）的位置为绝对位置。因此，您可以从CSS中删除它：

/* remove this */
#mapContainer {
  position: relative;
}

此外，您还应该使用event.pageX作为left和event.pageY对于顶部。

问题是您交换了 x 和 y 值。

相关代码修改：

 .style("left", `${event.pageX}px`)
 .style("top", `${event.pageY}px`)