Manually firing events for an SVG Element?

[Aleksey]

All,

I've done some digging, but I haven't found a simple (enough for me) solution to my problem. Not an advanced JavaScript programmer here.

I have some SVGGElements that I have an on("click") event for when I entered them.

I want to manually fire this event programmatically under some other cricumstances.

I can get as far as getting my hands on the SVGGElement and even the .on("click") for it, but I'm at a loss as to what to do from there.

Maybe I just don't know enough to fill in these blanks: .on("click")( ____ , ____) where my function is expecting a d and an i?

Pardon the noobery ;)

Thanks,

Aleksey

[jerome cukier]

well, you can do the following

instead of writing 

myelement.on("click", function(d,i) { /* does stuff */ });

you can write: 

myelement.on("click", action);

and then

function action(d,i) { /* does stuff */ }

and subsequently call the function action from anywhere. 

by the way, if you don't need to make reference to the data underlying your element or to its rank among similar element feel free to drop the (d,i) altogether. (i.e. function action() {...})

[Aleksey]

I will drop the "i", thank you, but I will need the d.

I think carving out the action() as below accomplishes then same thing as getting my hands on the .on("click").

With just the (d) now, how do I call the function?

action( ____ )?

[Jinling Li]

REMOVE ME

[Kai Chang]

You can unsubscribe from this list within gmail. Click the little arrow next to "d3-js" then "Unsubscribe to this mailing-list"

Aleksey, it sounds like part of your question involves simulating a click event. d3 doesn't have this built-in, but jQuery does:

http://api.jquery.com/trigger/

Without jQuery, use dispatchEvent.

https://developer.mozilla.org/en-US/docs/DOM/element.dispatchEvent

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent

http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript

Simplest example of dispatchEvent I found:

http://stackoverflow.com/questions/9714527/why-does-fireevent-not-work-in-ie9

[Ian Johnson]

If you have access to the g element you want with a d3 selection you can do

var selection = d3.select(...);

selection.each(function(d,i) {

 action(d);

})

--
Ian Johnson

http://enja.org

[Aleksey]

Great! Thanks Jerome and Kai.

My solution:

var event = document.createEvent("SVGEvents");

event.initEvent("click",true,true);

myNode.dispatchEvent(event);

This then fires the event that I assigned with .on("click" earlier.

This is nicer than manually creating a mouse event with Xs and Ys, as that's difficult and is probably fraught with peril given that my objects overlap each other at times.

[Amol Khatri]

Thnaks Aleksey. It worked perfectly for me.

[Manny]

I am facing the same issue on SVG "g" element.

var event = document.createEvent("SVGEvents");

event.initEvent("click",true,true);

var d = document.getElementById("a0xa000033"); // id for one the "g" element.

d.dispatchEvent(event);

Event didn't fire (checked in FF)

But I am able to fire the same event for an "image" tag under the "g" element.

Any insight appreciated.

Thanks.