为什么只有欧洲出现在我的RaphaelJs地图上？

Question

早上好。

我组建了一个世界地图使用视差的拉斐尔地图教程点击洲：https://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map

我也跟着一步一步的一切，但一旦我加载页面，我得到的唯一的大陆是我的第一个，欧洲。请帮我弄清楚我出错的地方，谢谢！我很喜欢与Raphael等插件一起工作。让我知道是否需要发布更多信息。

下面是一个显示问题我的小提琴： https://jsfiddle.net/Nimara/jut2c40t/

示例代码（太大张贴坐标）：

var rsr = Raphael('map', '770', '505.3'); 
var continents = []; 

//Europe 
var europe = rsr.path("coordinates jabber, see fiddle") 
europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}).data('id', 'europe'); 
continents.push(Europe); 

//Asia 
var asia = rsr.path("coordinates jabber, see fiddle") 
asia.attr({ 
'stroke-width': '0', 
'stroke-opacity': '1', 
'fill': '#000000' 
}).data('id', 'asia'); 
continents.push(asia); 

//North America 
var north_america = rsr.path("coordinates jabber, see fiddle") 
north_america.attr(
{ 
'stroke-width': '0', 
'stroke-opacity': '1', 
'fill': '#000000' 
}).data('id', 'north_america'); 
continents.push(north_america); 

//Africa 
var africa = rsr.path("coordinates jabber, see fiddle") 
africa.attr(
{ 
'stroke-width': '0', 
'stroke-opacity': '1', 
'fill': '#000000' 
}).data('id', 'africa'); 
continents.push(africa); 

//South America 
var south_america = rsr.path("coordinates jabber, see fiddle") 
south_america.attr(
{ 
'stroke-width': '0', 
'stroke-opacity': '1', 
'fill': '#000000' 
}).data('id', 'south_america'); 
continents.push(south_america); 

//Australia 
var australia = rsr.path("coordinates jabber, see fiddle") 
australia.attr(
{ 
'stroke-width': '0', 
'stroke-opacity': '1', 
'fill': '#000000' 
}).data('id', 'australia'); 
continents.push(australia); 

//Iterate through the regions and select continent to fill with color 
for (var i=0; i<continents.length; i++) { 
    if (continents[i].data('id') == 'africa'){ 
    continents[i].node.setAttribute('fill', 'red'); 
} 
} 


//NOT SO SURE I NEED THIS BOTTOM HALF. With or without it the problem persists. 
XMLID_1209_.attr(
{ 
'id': 'XMLID_1209_', 
'name': 'XMLID_1209_' 
}); 
var rsrGroups = [XMLID_1209_]; 
XMLID_1209_.push(europe, asia, north_america, africa, south_america, australia); 

这是我处理的地图：http://www.amcharts.com/svg-maps/?map=continents

谢谢再次！

Answer 1

Working example

有在脚本中的一些问题：

europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}).data('id', 'europe'); 
continents.push(Europe);// javascript is case-sensitive 

应该是：

europe.attr({'stroke-width': '0', 'stroke-opacity': '1','fill': '#000000'}); 
europe.id='europe'; 
continents.push(europe); 

，此方法是定义：

.data 

这是每个大陆都经常出现。

for (var i=0; i<continents.length; i++) { 
    if (continents[i].data('id') == 'africa'){ 
     continents[i].node.setAttribute('fill', 'red'); 
    } 
} 

应该是：

for (var i=0; i<continents.length; i++) { 
    if (continents[i].id == 'africa'){ 
     continents[i].node.setAttribute('fill', 'red'); 
    } 
} 

这段代码实际上没有任何意义（没有定义XMLID_1209_）：

XMLID_1209_.attr(
{ 
    'id': 'XMLID_1209_', 
    'name': 'XMLID_1209_' 
}); 
var rsrGroups = [XMLID_1209_]; 
XMLID_1209_.push(europe, asia, north_america, africa, south_america, australia); 

我建议你去看看你的开发工具（F12在你喜欢的浏览器中），每次你调试你的脚本;按照一般规则采取这个建议。 正如你可以在下面的图片中看到：

错误是真的清楚