svg地图数据可视化鼠标操作事件函数

• 地图对应的数据

/*svg地图*/
    var classObj = [
        {name: "qingqi", place: "青岐村委", color: "#f6510d", orgTotal: 987, orgPerson: "张三丰"},
        {name: "mumian", place: "木棉村委", color: "#a07000", orgTotal: 187, orgPerson: "乔峰1"}
    ];

• 执行操作事件

//执行操作事件；
    for (var i = 0; i < classObj.length; i++) {
        (function () {
            var option = "." + classObj[i].name;
            var color = classObj[i].color;
            var place = classObj[i].place;
            var orgTotal = classObj[i].orgTotal;
            var orgPerson = classObj[i].orgPerson;

            $(option).each(function (index, element) {
                element.onmouseover = function () {
                    var className = "." + this.className.animVal;
                    $(className).each(function (index, elem) {
                        elem.style.fill = "#031a78";
                        $(className).filter("text")[0].style.fill = "#fff";
                    })

                    //显示当前区域信息;
                    $("#tips").css("display", "block");
                    $("#orgName").html(place);
                    $("#orgTotal").html(orgTotal);
                    $("#orgPerson").html(orgPerson);
                }

                element.onmouseout = function () {
                    this.style.fill = color;
                    var className = "." + this.className.animVal;
                    $(className).each(function (index, elem) {
                        elem.style.fill = color;
                        $(className).filter("text")[0].style.fill = "#fff";
                    })
                    //隐藏当前区域信息;
                    $("#tips").css("display", "none");
                }
            });
        })(i)

Done！