Raphaeljs支持IE8

Question

我正在使用Raphael-js创建动态可视化.我开始使用Raphael-1.5.0,事情似乎工作正常.http://www.iiserpune.ac.in/~coee/histome/variants.php?variant=Histone_H3.1特别是,PTM(大字母顶部的小字母)被超链接到各自的页面.虽然这在Chrome,Firefox和Safari中有效,但IE8上没有超链接(在IE9中工作).当我升级到Raphal-2.0在IE8中,这个数字完全消失了.这是拉斐尔或浏览器的问题,以及解决这个问题的方法吗？

Answer 1

您可能知道或不知道,Raphaël为IE6-8生成VML,为所有其他浏览器生成SVG.但是,VML和SVG的工作方式完全不同.Raphaël的记录非常充分.

您遇到的问题是由于您正在向元素添加href属性,即ptm.attr({'href':'ptm_sp.php?ptm_sp=h3R2ci'});哪个适用于SVG,因为SVG元素可以以与DOM元素相同的方式具有事件.

但是对于VML,您必须将Raphaël特定click函数附加到对象,并在其中生成document.location.href = 'http://URL';.这里列出了 Raphaël事件,但请忽略关于使用您喜欢的库的paragaph,因为这对于VML是不正确的.

应该帮助您解决问题的示例代码:

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

另外,我不禁注意到您可以稍微优化代码大小.现在,你的JS代码输出如下:

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.

...每项增加3行.但是,每个项目可以增加一行:

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);
}

只是一个想法!在Code Review上发布您的代码以培养您的编码技能 - 强烈推荐!:)