Newsignature美国地图:悬停在任何州时更改州填充

Question

我正在使用这个插件开发交互式美国地图，在初始加载时，一个状态(FL(默认会填充悬停颜色，效果很好。当鼠标悬停在任何状态时，我需要从状态(FL(中删除那些默认(填充(颜色。这是我的代码

$(document).ready(function () {
$("#map-container").usmap({
stateStyles: {
fill: "#8B1109",
stroke: "#fff",
"stroke-width": 1,
"stroke-linejoin": "round",
scale: [1, 1],
},
stateHoverStyles: {
fill: "#58adaf",
stroke: "#fff",
scale: [1.1, 1.1],
},
stateHoverAnimation: false,
stateSpecificStyles: {
FL: {
fill: "#58adaf",
},
},
mouseover: function (event, data) {
console.log(data);
},
});
});

我的要求是悬停在任何状态默认状态(Fl(应该恢复到正常颜色。

当前状态：

默认状态

要求：当鼠标移到加利福尼亚州时，佛罗里达州应填充默认颜色

提前感谢

Answer 1

这帮助我通过添加新属性(id(和更改mouseover事件中的颜色来实现我的需求。

文件"jquery.usmap.js"中的更改

由此：

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
stateAttr = {};
if(this.options.stateSpecificStyles[state]) {
$.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
} else {
stateAttr = attr;
}
this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
this.topShape = this.stateShapes[state];
this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, "cursor": "pointer"});
this.stateHitAreas[state].node.dataState = state;
}

对此：

// Create the actual objects
var stateAttr = {};
for(var state in paths) {
stateAttr = {};
if(this.options.stateSpecificStyles[state]) {
$.extend(stateAttr, attr, this.options.stateSpecificStyles[state]);
} else {
stateAttr = attr;
}
this.stateShapes[state] = R.path(paths[state]).attr(stateAttr);
this.topShape = this.stateShapes[state];
this.stateHitAreas[state] = R.path(paths[state]).attr({fill: "#000", "stroke-width": 0, "opacity" : 0.0, 'cursor': 'pointer'});
this.stateHitAreas[state].node.dataState = state;
this.stateShapes[state].node.setAttribute("id", state); // New attribute
}

js文件(配置(中的更改

$('#map-container').usmap({
'stateSpecificStyles': {
'FL': {
fill: "#58adaf",
}
},
'mouseover': function (event, data) {
$('#map-container > svg > path').each(function (e) {
$(this).css('fill', '#8B1109');
})
$('#' + data.name).css('fill', '#58adaf');
}
});