score:15

Accepted answer

You can select them with d3 and then bind a function to them with .on('click', function)

For your code, this would look something like this:

d3.select('#xaxis')
    .selectAll('.tick.major')
    .on('click',clickMe)

function clickMe(){alert("I've been clicked!")}

Note that this will select the entire tick, not just the text, since .tick.major is the class of the group that contains both the tick label (the text) and the tick itself (an SVG line).

You can also use d as an argument in the function you are calling on your ticks. If you do so, d will contain the value of the tick. For example, the following would send an alert containing each tick value:

d3.select('#xaxis')
    .selectAll('.tick.major')
    .on('click',clickMe)

function clickMe(d){alert(d)}

Note that you can probably call .major instead of .tick.major if nothing but the major ticks has the major class.


Related Query