internet explorer - Raphael JS: how to use jQuery selectors on objects in IE?

Question

I'm trying to use Raphael JS, but jQuery selectors don't seem to work with Raphael JS in IE8.

In Chrome and Firefox this works:

  var paper = ScaleRaphael("test", 500, 500);

  var c = paper.circle(50, 50, 40);

  c.node.setAttribute('class','bluecircle');

  $('.bluecircle').attr({fill: 'blue'});

But in Internet Explorer (IE8, which uses VML instead of SVG) nothing is shown.

Basically what I'm trying to do is to give each object a class, so I can use Jquery selectors to manipulate all objects at once that have a certain class...

Does anybody know a way how to do this, that also works in IE ?

Answer 1

This is not exactly the same as using classes to address a group of objects, but I wrote a patch against Raphael to allow for named sets. Simply invoke with paper.set('uniqueID', element1, element2, ...). Elements contain a groups array with each group they've been assigned to, and the top Raphael paper object has a groups dictionary keyed by the 'uniqueID'.

The following test code shows how you can apply a hover handler to a named set, and use the hover callback to turn all the members of the group black on hover:

var marker1 = paper.circle(50, 20, 10).attr({'fill' : '#ff0000'});
var marker2 = paper.circle(100, 20, 10).attr({'fill' : '#ff0000'});
var marker3 = paper.circle(150, 20, 10).attr({'fill' : '#ff0000'});
var marker4 = paper.circle(200, 20, 10).attr({'fill' : '#ff0000'});

var s = paper.set('setID', marker1, marker2);
s.push(marker3, marker4);
s.pop();

// If marker 1, 2, or 3 is hovered, act on whole group
s.hover(function() {
  for (var i = 0, ii = this.groups.length; i < ii; ++i) {
    var set = this.paper.groups[this.groups[i]];
    for (var j = 0, jj = set.items.length; j < jj; ++j) {
      set.items[j].attr({'fill' : '#000000'});
    }
  }
});