javascript - How to add on-click events to D3 axis ticks -

i want make y axis ticks clickable, can request data in background depending on tick clicked.

my axis <g class="y axis" id="yaxis"> , inside there ticks this:

<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> 

i want able click text (ok if whole tick registers click) , able use value of ("1547" here) in function.

i looked through previous questions without luck used them base:

d3.js make axis ticks clickable

how make axis ticks clickable in d3.js/dimple.js

what tried

so far have been successful in adding click event listener whole y axis not want. have not managed add listener each tick. idea might doing wrong?

these work apply 1 listener whole axis

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

all of these not add listeners 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!");}); 

i using d3 3.5.3.

the solution easy...

i tried add listeners right after creating y axis. before ticks of axis created in code. means there nothing select , bind to.

once moved code after tick creation, worked fine.

i using

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

lesson: if d3 not bind things things, maybe things not exist (yet).