javascript - 使用 RaphaelJS 制作交互式等值线图

Question

我刚开始的地图项目遇到了麻烦。

我想使用 RaphaelJS 制作交互式地图。在从 shapefile 转换之后，我从 QGIS 导入了我的地图所基于的 SVG。并在Ready Set Raphael（http://jsfiddle.net/allankiezel/FJrNN/）上使用此示例中的一些代码，我尝试使用RaphaelJS中的mouseover（）方法使各省在鼠标悬停在它们上方时出现在前面图书馆。

完整的代码在 JSfiddle 上，因为它太长了，不适合在这里：http: //jsfiddle.net/siyafrica/nCL25/

var rsr = Raphael('rsr', '612', '792');

var SouthAfrica = rsr.set();
SouthAfrica.attr({'id': 'South-Africa','name': 'SouthAfrica'});

var easterncape = rsr.set(); ...

var len = rsrGroups.length;
    for(i = 0, i <= len, i++) {
       var el = rsrGroups[i];
el.mouseover(function() {
    this.animate({
            scale: '1.05'
        }, 200);
});
    }; 

我正在使用 OS X 的 Macbook Pro 上运行它。

我希望有人能帮帮忙。我认为修复很简单，但我一直在绞尽脑汁试图找到它。