带 JS 的 SVG 地图 - 悬停时更改多条路径的状态

Question

我正在使用 Raphael 库并参考 this tutorial. I've also set up a working jsfiddle here 中的详细信息制作可点击的 SVG 地图。基本上，对于地图中的每个州，我都为地图形状本身和州缩写标签定义了路径——在 fiddle 的情况下，为了演示目的，我显示了一个州 PA。我为 "regions" 和 "labels" 定义了单独的数组。目前，我的悬停状态适用于状态形状（将其颜色更改为深蓝色），但是也会在悬停在状态上时将状态缩写标签更改为白色。

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

// 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]);
}

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

Answer 1

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

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
}

带 JS 的 SVG 地图 - 悬停时更改多条路径的状态

SVG Map w/ JS- Changing the states of multiple paths on hover

javascript

svg

raphael

addeventlistener