jQuery - Raphael - SVG - selector based on custom data

Question

I have assigned a custom data attribute to some circles added to the Raphael canvas as follows in a each() loop:

marker.data(\'transaction\', tr         


        

Answer 1

I think the problem is that jQuery has no access to the SVG nodes. You have to try normal Javascript. The problem could be the compatibility with older browsers if you use querySelectorAll.

Look here: http://dean.edwards.name/jsb/behavior/querySelectorAll.html and here: http://www.w3.org/TR/selectors-api/#queryselectorall

Possible solution: Have a look in Raphael-Doc : http://raphaeljs.com/reference.html#Element.data

Answer 2

Being that Raphael must support VML, it doesn't keep data in the DOM as is normal with html5 applications. If you want to store data in the dom you must access the html node and set the attribute there...

marker.node.setAttribute('data-transaction', transaction);

Then you can then query the elements with querySelectorAll. Keep in mind this will fail on < IE8.

If you want to keep older IE support I'd recommend writing a function that iterates over your markers and returns the Raphael object when mark.data("transaction") == transaction