d3_Tooltips 使用 d3.select(this) 定位

Question

我正在使用 d3.js v.6。我有 HTML div 工具提示：

<div id="tooltip"></div>

根据此代码出现在悬停事件上：

g_points.on("mouseover", function (d, i) {
            d3.select(this).style("fill", "black");
            d3.select("#place").text("Place: " + i.place);
            d3.select("#tooltip")
              .style("left", d3.select(this).attr("cx") + "px")
              .style("top", d3.select(this).attr("cy") + "px")})

我需要稍微改变 #tooltip 的位置。我已经测试了这些不起作用的选项：

// .style("left", d3.event.pageX + 20 + "px")
// .style("left", d3.event.pageY - 80 + "px")

和

// .style("left", d3.mouse(this)[0] + 70 + "px")
// .style("top", d3.mouse(this)[1] + "px")

Answer 1

尝试此代码（应与 V6 一起使用）：

g_points.on("mouseover", function (e, d, i) {
  d3.select(this).style("fill", "black");
  d3.select("#place").text("Place: " + i.place);
  d3.select("#tooltip")
    .style("left", `${e.layerX}px`)
    .style("top", `${e.layerX}px`);
});

d3_Tooltips 使用 d3.select(this) 定位

d3_Tooltips positioning using d3.select(this)

javascript

position

tooltip

d3.js