javascript - 如何将点击事件添加到 D3 轴刻度

Question

我想让我的 y 轴刻度可以点击，这样我就可以根据点击的刻度在后台请求一些数据。

我的轴是 <g class="y axis" id="yaxis">里面有这样的蜱虫:

<g class="tick" transform="translate(0,0)" style="opacity: 1;">
 <line x2="-6" y2="0"></line>
 <text dy=".32em" x="-9" y="0" style="text-anchor: end;">1547</text>
</g>

我希望能够单击文本(如果整个刻度记录了单击，则可以)并能够在函数中使用它的值(此处为“1547”)。

我没有运气地浏览了以前的问题，但将它们用作基础:

d3.js make axis ticks clickable

How to make axis ticks clickable in d3.js/dimple.js

我尝试过的

到目前为止，我只成功地向整个 y 轴添加了一个点击事件监听器，这不是我想要的。我没有设法为每个滴答声添加一个监听器。知道我可能做错了什么吗？

这些工作但对整个轴应用一个监听器

svg.select(".y.axis").on("click", function() { console.log("click!");});
svg.select("#yaxis").on("click",function(d) {console.log("click!");});

所有这些都不会为 ticks 添加监听器

svg.selectAll(".y.axis g").on("click", function() {console.log("click!");});
svg.selectAll(".y.axis .tick").on("click", function() { console.log("click!");});
svg.select(".y.axis").selectAll(".tick").on("click", function() { console.log("click!");});
svg.select(".y.axis").selectAll("text").on("click", function() { console.log("click!");});
svg.selectAll("text").on("click", function() { console.log("click!");});
svg.select("#yaxis").selectAll(".tick").on("click",function(d) {console.log("click!");});
svg.selectAll(".tick").on("click", function() { console.log("click!");});

我正在使用 D3 3.5.3。

Answer 1

解决方案非常简单......

我试图在创建 y 轴后立即添加监听器。这是在我的代码中创建轴刻度之前。这意味着没有什么可以选择和绑定(bind)。

一旦我将代码移动到之后创建报价，一切正常。

我正在使用

svg.selectAll(".y.axis .tick")
.on("click", function(d) {console.log(d);})
;

教训:如果 D3 不将事物与事物绑定(bind)，则事物可能还不存在。