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

Question

上午。

我正在使用Parallax的Raphael Map教程整理一张可点击大陆的世界地图：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）;像一般规则一样接受这个建议。 如下图所示：

错误非常明显