d3_Tooltips 使用 d3.select(this) 定位答案

【问题标题】：d3_Tooltips positioning using d3.select(this)d3_Tooltips 使用 d3.select(this) 定位
【发布时间】：2021-04-26 15:09:16
【问题描述】：

我正在使用 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")

【问题讨论】：

tooltip是什么样的HTML元素？
HTML div - <div id="tooltip"></div>
它回答了你的问题吗？ stackoverflow.com/questions/67240931/…
offsetX - Uncaught TypeError: can't access property "offsetX", d3.event is undefined layerX - 同样的错误
是的，是的，我使用的是 v.6。我刚刚在我的问题中添加了额外的代码行。你能告诉我应该输入什么事件以及在哪里输入。如果您能在我的案例中发布一个带有示例的答案，那就更好了。谢谢

标签： javascript d3.js position tooltip

【解决方案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`);
});

【讨论】：

谢谢，现在可以了。您能否给我有关此问题的信息的链接，因为我仍然不明白为什么我需要在函数中使用三个参数 - (e, d, i)?‍‍♂️
第一个参数是事件，第二个是数据。第三个大概是索引，不知道你为什么需要它。你可以从数据中取place：d3.select("#place").text("Place: " + d.place);
好的，顺便说一句，就我而言，它甚至可以与function (e, d)
在此处找到有关此问题的一些信息，阻止“事件管理”：observablehq.com/@d3/d3v6-migration-guide