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

admin管理员组

文章数量:1345028

I want to make my y axis ticks clickable, so I can request some data in the background depending on which tick was clicked.

My axis is <g class="y axis" id="yaxis"> and inside there are ticks like 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 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.

I looked through previous questions without luck but used them as base:

d3.js make axis ticks clickable

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

What I tried

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?

These work but apply one listener to the 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 do not add listeners to the 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 am using D3 3.5.3.

I want to make my y axis ticks clickable, so I can request some data in the background depending on which tick was clicked.

My axis is <g class="y axis" id="yaxis"> and inside there are ticks like 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 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.

I looked through previous questions without luck but used them as base:

d3.js make axis ticks clickable

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

What I tried

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?

These work but apply one listener to the 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 do not add listeners to the 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 am using D3 3.5.3.

• javascript
• d3.js

Share Improve this question Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge asked Jul 14, 2015 at 12:13 bugmenot123bugmenot123 1,16711 gold badge1919 silver badges3737 bronze badges 3

• Do you mean the SVG? I did include the axis in the question above (<g class="y axis" id="yaxis">), the ticks are inside it. – bugmenot123 Commented Jul 14, 2015 at 12:18
• It would be helpful if you provide a fiddle but in theory this should work svg.selectAll('g.tick text').on('click', function(){console.log('clicked');}) – Alex_B Commented Jul 14, 2015 at 12:23
• I feel so stupid right now, the ticks are created much further down in my code so obviously there is nothing to selectAll and bind to... I will post the answer in a moment... Thank you for being my rubber ducks. :) – bugmenot123 Commented Jul 14, 2015 at 12:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

The solution was so easy...

I tried to add the listeners right after creating the y axis. This was before the ticks of the axis were created in my code. This means that there was nothing to select and bind to.

Once I moved the code to after the tick creation, everything worked fine.

I am using

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

Lesson: If D3 does not bind things to things, maybe things do not exist (yet).

本文标签： javascriptHow to add onclick events to D3 axis ticksStack Overflow