Question

106

Get reference to target of event in d3 in high-level listener?

rated 0 times [ 107] [ 1] / answers: 1 / hits: 8410 / 8 Years ago, sun, july 10, 2016, 12:00:00

I made a put a click listener on an svg element using d3:

<svg height=100 width=100>

  <circle cx=50 cy=50 r=40 stroke=black stroke-width=3 fill=red id=a>

  <circle cx=50 cy=50 r=40 stroke=black stroke-width=3 fill=red id=b>

  <circle cx=50 cy=50 r=40 stroke=black stroke-width=3 fill=red id=c>

</svg>

Javascript:

d3.select('svg').on('click', function(d, i) {

  // Somehow console.log the ID of the circle clicked on (if any).

});

I'd like to refer to the circle that was clicked on (if any) in the handler. However, d3 does not give me a reference to the event. I know that I could just put a listener on every circle and not rely on the event bubbling to the <svg> element, but I don't want to do that since I plan to dynamically add more circles later and don't want to have to carefully add and remove listeners.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

timothyc

Add To Favorites

Follow

Total Points: 233

Total Questions: 103

Total Answers: 103

Location: Jordan

Member since Thu, Aug 5, 2021

3 Years ago

answered 8 Years ago angelr · Accepted Answer

From the D3.js documentation:

To access the current event within a listener, use the global d3.event.

This allows you to access everything related to the event, including mouse position and event source/target (print d3.event in console.log()).

To get the ID you could:

d3.select('svg').on('click', function(d, i) {

    // Somehow console.log the ID of the circle clicked on (if any).

    console.log(Clicked ID:  + d3.event.target.id);

});

If the circles are stacked in the same position as in your example, the event will be caught by the last circle you added (unless you change its pointer-events CSS property to none), since the previous ones will be hidden.