如何将点击事件添加到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>

我希望能够单击文本(如果整个tick记录了单击,则确定)并且能够在函数中使用它的值(此处为"1547").

我没有运气地查看以前的问题但是用它们作为基础:

d3.js使轴刻度可点击

如何在d3.js/dimple.js中点击轴刻度

我尝试了什么

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

这些工作但是将一个监听器应用于整个轴

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

所有这些都不会将侦听器添加到刻度线中

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轴后立即添加侦听器.这是在我的代码中创建轴的刻度之前.这意味着没有什么可以选择和绑定.

有一次,我感动的代码后蜱创造,一切运行良好.

我在用

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

经验教训:如果D3没有将东西绑定到事物上,那么事情可能还不存在(还).