d3_使用d3进行螺栓定位.选择(this)

Question

我使用的是d3.js v.6。我有HTMLdiv工具提示：

<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`);
});