Javascript Raphael/Mapael-由单个图例控制的绘图和区域

Javascript Raphael/Mapael-由单个图例控制的绘图和区域,javascript,jquery,svg,raphael,mapael,Javascript,Jquery,Svg,Raphael,Mapael,我一直在基于Raphael.js开发一些定制的SVG地图,但是Mapael是我正在使用的库。我已经设置了一个JSFIDLE示例,以便更好地解释我的问题 如您所见,我映射了不同的路径以显示不同描述的工具提示。还有楼梯/自动扶梯(在商场环境中)的图例。以及地图不同部分/路径的另一个图例 现在我需要做的是找到一种方法,例如,单击图例项来隐藏/显示地图的路径/区域(已实现),以及悬停在该特定路径/区域上时显示的工具提示说明 现在,在尝试了一些不成功的事情之后,我想到了一个解决方法,单击路径/区域的图例

我一直在基于
Raphael.js
开发一些定制的SVG地图,但是Mapael是我正在使用的库。我已经设置了一个JSFIDLE示例,以便更好地解释我的问题

如您所见,我映射了不同的路径以显示不同描述的工具提示。还有楼梯/自动扶梯(在商场环境中)的图例。以及地图不同部分/路径的另一个图例

现在我需要做的是找到一种方法,例如,单击图例项来隐藏/显示地图的路径/区域(已实现),以及悬停在该特定路径/区域上时显示的工具提示说明

现在,在尝试了一些不成功的事情之后,我想到了一个解决方法,单击路径/区域的图例项,也可以隐藏/显示带有文本描述属性的绘图。例如,在fsfiddle示例中,单击“Azul by moussy”(区域图例中的第一项),该区域将高亮显示,如果我还可以隐藏/显示一个绘图(带有文本属性),该绘图是该特定路径/区域的描述

我希望我能清楚地解释我的情况

任何想法/帮助都将不胜感激

谢谢

阿纳布

代码片段:

$(function(){
$(".maparea6").mapael({
    map : {
        name : "world_countries",
        zoom: {
            enabled: true,
            maxLevel : 10
        },
        defaultPlot: {
            size: 10
        },
        defaultArea: {
            attrs : {
                stroke : "#000", 
                "stroke-width" : 0.5
            }
        }
    },
    legend : {
        area : {
            display : true,
            title :"", 
            slices : [
                    {

                    max :63,
                    min :61, 
                    attrs : {
                        fill : "#f0eeb5"
                    },
                    label :"AZUL by moussy"
                }
                ,
                {

                    max :11,
                    min :9, 
                    attrs : {
                        fill : "#f0eeb5"
如果有人感兴趣,$(“.areaLegend svg text:eq(X)”;允许您在图例项上添加事件,但此解决方案使用起来不是很方便

而且,路径和绘图已经具有此功能,它们可以很容易地选择,即:$(“[data id='path_ad']”);以便在其上添加一些事件或任何内容


开发人员的github:

感谢您报告关于图例中元素的这一问题。jQuery Mapael的1.0.0版已经解决了这个问题: