带JS的SVG Map-在悬停时更改多个路径的状态

Posted 2021-03-29

我正在使用Raphael库处理可点击的SVG地图，并引用this tutorial的详细信息。我还建立了一个有效的jsfiddle here。基本上，对于地图中的每个状态，我都有为地图形状本身和状态缩写标签定义的路径 - 在小提琴的情况下，我显示一个状态PA，用于演示目的。我为“区域”和“标签”定义了单独的数组。目前，我有悬停状态工作状态形状（将其颜色更改为深蓝色），但也希望状态缩写标签在悬停在状态时更改为白色。

我定义了以下数组和循环来处理区域（形状）的悬停和单击事件，我想添加找到匹配标签的逻辑，并在悬停时将其fill属性更改为白色（并在mouseout上恢复）：

// REGION ARRAY
var regions = {};
regions["pennsylvania"] = {href: "#", path: map.path("path here")};

// LABEL ARRAY
var labels = {};
labels["pennsylvania"] = {href: "#", path: map.path("path here")};

// REGION STYLES
var animationSpeed = 500;
var shapeStyle = {
    fill: "#cdd6e9",
    stroke: "#fff",
    "stroke-width": 0.25,
    "stroke-linejoin": "round",
    cursor: "pointer"
};
var hoverStyle = {
  fill: "#0a3a62"
}

// REGION LOOP
for (var regionName in regions) {
    (function(region) {

        region.path.attr(shapeStyle);
        region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle, animationSpeed);
        }, true);

        region.path[0].addEventListener("mouseover", function() {
            region.path.animate(hoverStyle, animationSpeed);
        }, true);

        region.path[0].addEventListener("click", function() {
            location.href = region.href;
        }, true);

    })(regions[regionName]);
}

因此，在循环遍历区域数组时，如何调整脚本以在标签数组中找到匹配的标签并更改其填充状态？感谢您的任何见解。

答案

在设置区域事件时设置标签事件，以便在regionName上进行匹配。您可以在let循环上使用for关键字，也可以将regionName或两者（regions[regionName]，labels[regionName]）传递给@Ian建议的即时函数。

var labelHoverStyle = { // add
    fill: '#FFFFFF'
}

var labelStyle = {
    fill: "#0a3a62",
    stroke: "#0a3a62",
    "stroke-width": 0.25,
    "stroke-linejoin": "round",
    cursor: "pointer" 
}

使用Let

for(let regionName in regions) { // notice the variable declaration
    (function (region) {

        if (regionName == "district-of-columbia") {
            region.path.attr(shapeStyle2);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle2, animationSpeed);
            labels[regionName].path.animate(labelStyle, animationSpeed);
            }, true);
        } else {
            region.path.attr(shapeStyle);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle, animationSpeed);
            labels[regionName].path.animate(labelStyle, animationSpeed);
            }, true);
        }

        region.path[0].addEventListener("mouseover", function() {
            region.path.animate(hoverStyle, animationSpeed);
            labels[regionName].path.animate(labelHoverStyle, animationSpeed);
        }, true);

        region.path[0].addEventListener("click", function() {
            location.href = region.href;         
        }, true);

    })(regions[regionName]);
}

通过regionName或（regions[regionName],labels[regionName]）

for(var regionName in regions) {
    (function (region, label) { // notice the parameters

        if (region.href.indexOf('district-of-columbia') > -1) {
            region.path.attr(shapeStyle2);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle2, animationSpeed);
            label.path.animate(labelStyle, animationSpeed);
            }, true);
        } else { 
            region.path.attr(shapeStyle);
            region.path[0].addEventListener("mouseout", function() {
            region.path.animate(shapeStyle, animationSpeed);
            label.path.animate(labelStyle, animationSpeed);
            }, true);
        } 

        region.path[0].addEventListener("mouseover", function() {
            region.path.animate(hoverStyle, animationSpeed);
            label.path.animate(labelHoverStyle, animationSpeed);
        }, true);

      ....

    })(regions[regionName], labels[regionName]); // notice the arguments
}