如何在d3js图表上显示数据索引的工具提示？ （没有鼠标悬停事件）

Question

例如，我有这个图表http://bl.ocks.org/d3noob/a22c42db65eb00d4e369。 鼠标悬停事件有一个工具提示。因此，有一个坐标可以显示工具提示。

但我想通过点击带有节点ID（按日期或价格）的按钮来显示工具提示（并更改节点颜色）。因此工具提示没有鼠标事件，也没有坐标pageX。我怎么能没有坐标但是通过节点索引呢？ 感谢。

Answer 1

第一步：将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>

第四步（“我可以给你更多......”）：点击按钮时，获取圆圈的数据......

var thisData = d3.select("#" + this.value).data()[0];

...并将div放在容器的任何位置：

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

以下是修改后的bl.ocks：http://bl.ocks.org/anonymous/201bac3383aed438c1e43928db4a7a1c

编辑：如果要将工具提示放在圆形元素的相同位置，可以选择元素...

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

...并使用getter获取其cx和cy属性。这是另一个bl.ocks显示：http://bl.ocks.org/anonymous/ed5292e172c2cf38a9df1d735876f376