D3.js 如何通过d3js图表上的数据索引显示工具提示？（无鼠标悬停事件）

例如，我有这个图表。 鼠标悬停事件上有一个工具提示。因此，有一个坐标来显示工具提示

但我想通过点击带有节点id（按日期或价格）的按钮来显示工具提示（并更改节点颜色）。因此，工具提示没有鼠标事件和坐标pageX。我如何在没有坐标的情况下，通过节点索引来实现它？

---

谢谢。

第一步：将SVG和工具提示div附加到同一个容器中

第二步：使用每个圆的索引设置其ID。请记住：ID是唯一的

.attr("id", (d, i) => "circle" + i)

第三步：设置按钮的值以匹配ID：

<button value="circle1">Circle 1</button>
<button value="circle4">Circle 4</button>
<button value="circle6">Circle 6</button>

。。。并将div放置在与容器相关的任何位置：

div.html(formatTime(thisData.date) + "<br/>" + thisData.close)
    .style("left", 500 + "px")
    .style("top", 50 + "px");

---

。。。并使用getter获取其

cx

和

cy

属性。下面是另一个bl.ocks，显示如下内容：

谢谢！。但是有没有一种方法可以设置XY div的位置，因为它是在onmouse事件中设置的？你的意思是在每个圆的不同位置？检查我的编辑（对不起，区块参考上的新孩子们。不是我喜欢的音乐，但我帮不上忙…）是的，就是这样。听了那首歌。不是我喜欢的音乐）

div.html(formatTime(thisData.date) + "<br/>" + thisData.close)
    .style("left", 500 + "px")
    .style("top", 50 + "px");

var thisNode = d3.select("#" + this.value);