Question

I am creating a dynamic visualization using Raphael-js. I started off with using Raphael-1.5.0 and things seemed to work okay. http://www.iiserpune.ac.in/~coee/histome/variants.php?variant=Histone_H3.1 In particular, the PTMs (little letters on top of large letters) are hyperlinked to their individual pages. While this worked in Chrome, Firefox, and Safari, the hyperlinks were absent on IE8 (worked in IE9). When I upgraded to Raphal-2.0 In IE8 the figure disappeared completely. Is it an issue with Raphael or the browser and any way to get around this?

Answer 1

As you may or may not know, Raphaël produces VML for IE6-8, and SVG for all other browsers. However, VML and SVG works quite differently. This is very inadequately documented in Raphaël.

The issue you are experiencing is due to the fact that you are adding an href attribute to the elements, i.e. ptm.attr({'href':'ptm_sp.php?ptm_sp=h3R2ci'});, which works fine for SVG, since SVG elements can have events in the same manner as DOM elements.

For VML though, you will have to attach the Raphaël specific click function to the object, and produce document.location.href = 'http://URL'; inside of that. The Raphaël events are listed here, but please ignore the paragaph about using your favourite library, as this is incorrect for VML.

Example code that should help you solve your problem:

ptm.click(function(){
    location.href = 'ptm_sp.php?ptm_sp=h3R2ci';
});

---

Also, I couldn’t help noticing that you can optimize your code size a bit. Right now, your JS code outputs like this:

var ptm = paper.text(13.791304347826, 35, 'me2');
ptm.attr({'font-size':9});
ptm.attr({'href':'ptm_sp.php?ptm_sp=H3R2me2'});

var t = paper.text(13.791304347826, 70, 'R');
t.attr({'font-size':16});

var num = paper.text(13.791304347826, 85, '2');
num.attr({'font-size':9});

// etc.

… which increases with 3 lines per item. However, it could increase with one line per item:

var t = []; // texts
t.push([13.791304347826, 35, 'me2', 9, 'ptm_sp.php?ptm_sp=H3R2me2']);
t.push([13.791304347826, 70, 'R', 16]);
t.push([13.791304347826, 85, '2', 9]);

for(var i = 0; i < t.length; i++){
    var tt = paper.text(t[i][0], t[i][1], t[i][2]);
    var ta = {};
    if(t[i][3]) ta['font-size'] = t[i][3];
    if(t[i][4]) ta['href'] = t[i][3];
    tt.attr(ta);
}

Just a thought! Post your code on Code Review to develop your coding skills – highly recommended! 🙂