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事件列在here，但请忽略关于使用您喜欢的库的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上发布您的代码以提高您的编码技能 - 强烈推荐！：）

Raphaeljs支持IE8

1 个答案: