如何在d3js图表上按数据索引显示工具提示?(无鼠标悬停事件)

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

但是我想通过点击带有节点 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>

第四步("我可以给你更多...">(：点击按钮时，获取圆圈的数据...

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

相关内容