title: How to add on-click events to D3 axis ticks
body: <p>I want to make my y axis ticks clickable, so I can request some data in the background depending on which tick was clicked.</p>
  
  <p>My axis is <code>&lt;g class="y axis" id="yaxis"&gt;</code> and inside there are ticks like this:</p>
  
  <pre><code>&lt;g class="tick" transform="translate(0,0)" style="opacity: 1;"&gt;
   &lt;line x2="-6" y2="0"&gt;&lt;/line&gt;
   &lt;text dy=".32em" x="-9" y="0" style="text-anchor: end;"&gt;1547&lt;/text&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p>I want to be able to click the text (ok if the whole tick registers the click) and be able to use the value of it ("1547" here) in a function.</p>
  
  <p>I looked through previous questions without luck but used them as base:</p>
  
  <p><a href="https://stackoverflow.com/questions/17282801/d3-js-make-axis-ticks-clickable">d3.js make axis ticks clickable</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27522009/how-to-make-axis-ticks-clickable-in-d3-js-dimple-js">How to make axis ticks clickable in d3.js/dimple.js</a></p>
  
  <p><strong>What I tried</strong></p>
  
  <p>So far I only have been successful in adding a click event listener to the whole y axis which is not what I want. I have not managed to add a listener to each tick. Any idea what I might be doing wrong?</p>
  
  <p>These work but apply one listener to the whole axis</p>
  
  <pre><code>svg.select(".y.axis").on("click", function() { console.log("click!");});
  svg.select("#yaxis").on("click",function(d) {console.log("click!");});
  </code></pre>
  
  <p>All of these do not add listeners to the ticks</p>
  
  <pre><code>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!");});
  </code></pre>
  
  <p>I am using D3 3.5.3.</p>