爲什麼只有歐洲出現在我的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在你喜歡的瀏覽器中），每次你調試你的腳本;按照一般規則採取這個建議。 正如你可以在下面的圖片中看到：

錯誤是真的清楚