Select SVG 地图上只有一个区域使用 jQuery

Question

我正在使用 Mapael，它是 Raphael 的一个扩展，用于提供交互式地图，到目前为止我已经对其进行了编码，因此您可以 select 多个区域并使 div 元素可见单击区域，现在我希望能够限制用户一次只能 select访问一个区域。

http://plnkr.co/edit/2UAl4Yax99dJAPIDWuTy?p=preview

这是包含点击功能的代码部分。

eventHandlers: {
    click: function(e, id, mapElem) {
        var newData = {
            'areas': {}
        };
        if (mapElem.originalAttrs.fill == "#f4f4e8" && "id[^='department']") {
            newData.areas[id] = {
                attrs: {
                    fill: "#0088db"
                }
            };
            $('#' + id).css("visibility", "visible")
        }
        else if (mapElem.originalAttrs.fill == "#0088db" && "id[^='department']") {
            newData.areas[id] = {
                attrs: {
                    fill: "#f4f4e8"
                }
            };
            $("#" + id).css("visibility", "hidden")
        }
        $(".mapcontainer").trigger('update', [newData]);
    }
},

同样，此处显示的地图允许您单击多个区域，但我想将其设置为一次只能 select 一个区域。

我已经尝试了很长一段时间自己想出一个解决方案，但是我认为我的编码人员有些受阻，可以提供一些建议来为我指明正确的方向。我一直在尝试使用 .bind、.target 以及 mapael afterUpdate 功能（如果有帮助，如下所示）。

var options = {
  mapOptions: {},             // was updatedOptions
  replaceOptions: false       // replace opt.resetPlots/resetAreas: whether mapsOptions should entirely replace current map options, or just extend it,
  newPlots: {},               // was newPlots
  newLinks: {},               // was opt.newLinks
  deletePlotKeys: [],         // was deletedPlots
  deleteLinkKeys: [],         // was opt.deletedLinks
  setLegendElemsState: true,  // is new
  animDuration: 0,            // was opt.animDuration
  afterUpdate: function(){}   // was opt.afterUpdate
};
$(".container").trigger('update', [options]);

我不确定解决方案是否可以类似于在第一次单击时循环遍历 SVG 路径以确保没有元素被 clicked/has 蓝色填充，然后从那里开始？虽然这对我来说听起来有点过于复杂，但我不确定它在实践中将如何实施。

Answer 1

我找到了这个问题的解决方案，这里是它的一个plnkr；

eventHandlers: {
                    click: function (e, id, mapElem, textElem) {
                        var newData = {
                            'areas': {}
                        };

                        if (previousSelectedElementId !== null) {
                            newData.areas[previousSelectedElementId] = {
                                attrs: {
                                    fill: "#5ba4ff"
                                }
                            };
                        }

                        if (mapElem.originalAttrs.fill == "#5ba4ff") {
                            newData.areas[id] = {
                                attrs: {
                                    fill: "#0088db"
                                }
                            };
                            previousSelectedElementId = id;
                        } else {
                            newData.areas[id] = {
                                attrs: {
                                    fill: "#5ba4ff"
                                }
                            };
                            previousSelectedElementId = null;
                        }
                        $(".mapcontainer").trigger('update', [newData]);
                    }

http://jsfiddle.net/neveldo/wfftgu20/

Select SVG 地图上只有一个区域使用 jQuery

Select only one area on SVG map using jQuery

javascript

jquery

svg

raphael