Javascript 为fiddle添加路径,Raphael js

Javascript 为fiddle添加路径,Raphael js,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在用Raphael.js制作一张墨西哥地图,我正在尝试将我的结果做一个小提琴,但我不知道应该在小提琴中添加地图路径的位置。我试图在我已经拥有的Javascript上下添加路径,但我什么也没做 以下是我所拥有的: Javascript jQuery(function($) { var r = Raphael('chaptersMap', 900, 600); r.safari(); var _label = r.popup(50, 50, "").hide(); attributes = {

我正在用Raphael.js制作一张墨西哥地图,我正在尝试将我的结果做一个小提琴,但我不知道应该在小提琴中添加地图路径的位置。我试图在我已经拥有的Javascript上下添加路径,但我什么也没做

以下是我所拥有的:

Javascript

jQuery(function($) {
var r = Raphael('chaptersMap', 900, 600);
r.safari();
var _label = r.popup(50, 50, "").hide();
attributes = {
    fill: '#002652',
    stroke: '#939393',
    'stroke-width': 1,
    'stroke-linejoin': 'round'
};;
arr = new Array();

/* para cada path de nuestra fuente svg vamos a dibujar un path del tipo Raphael */
for (var correntPath in paths) {
    var obj = r.path(paths[correntPath].path);
    arr[obj.id] = correntPath;
    obj.attr(attributes);
    /* Al estar encima el mouse de nuestro correntPath, Cambiamos el color y se restablece cuando se deja */
    obj.hover(function() {
        this.animate({
            fill: '#F79729',
            stroke: '#8E8D90'
        }, 300);
        bbox = this.getBBox();
        _label.attr({
            text: paths[arr[this.id]].name
        }).update(bbox.x, bbox.y + bbox.height / 2, bbox.width).toFront().show();
    }, function() {
        this.animate({
            fill: attributes.fill,
            stroke: attributes.stroke
        }, 300);
        _label.hide();
    });
    /* Accion cuando le damos click a alguna parte de nuestro mapa */
    obj.click(function() {
        location.href = paths[arr[this.id]].url;
    });
} //fin For
});
CSS

HTML


谢谢,

您的路径容器在哪里I.e:array、object、etcI都有路径,但通常我只是将它们放在不同的js文件中,我不知道如何放置容器来容纳它们。
#mapa_mexico {
border:8px solid #002652;
background: #F0F0F0;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1f2f8', endColorstr='#d1f2f8',GradientType=0 );
width:650px;
height:442px;
margin:auto;
padding:2px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
}
<div id="mapa_mexico">
        <div id="chaptersMap">
        </div>
    </div>