在jQuery中访问SVG数据元素

Question

I am working with Mapael, a Raphael extension in order to create an interactive map of France. I would like fire off onClick events once the SVG paths are selected.

I have been able to make this work, however I feel that I would have to write a lot of code for something that could either be duplicated, or contained within one code block with ELSE IF statements.

Please see the below code as an example of this;

Here is the code drawing the map areas;

(function (factory) {
if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'), require('mapael'));
} else if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery', 'mapael'], factory);
} else {
    // Browser globals
    factory(jQuery, jQuery.fn.mapael);
}
}

(function ($, Mapael) {

"use strict";

$.extend(true, Mapael,
    {
        maps :  {
            france_departments : {
                width : 661.85596,
                height : 637.08588,
                elems : {
                   "department-75" : "m 533.65,37.59 c -0.56,0.01 -1.14,0.07 -1.69,0.09 l -0.47,0 -0.06,0 c -3.2,-0.16 -6.2,1.71 -8.25,3.88 -1.18,-0.38 -2.14,0.15 -3.09,0.66 -1.64,0.07 -4.2,2.99 -1.75,3.84 2.04,0.46 2.36,3 4.56,3.38 4.15,0.71 8.61,3.62 12.69,1 2.59,-2.23 5.56,1.56 8.38,0.72 1.37,-1.09 1.13,-4.27 -1.16,-3.72 -1.21,-0.03 -2,-1.04 -2.81,-0.38 -1.83,-2.4 -0.68,-4.78 -2.88,-7.06 -0.22,-2.16 -1.78,-2.45 -3.47,-2.41 z M 369.8,144.62 c -0.22,0.01 -0.47,0.02 -0.69,0.03 l -0.19,0 -0.03,0 c -1.27,-0.06 -2.44,0.7 -3.25,1.56 -0.47,-0.15 -0.87,0.05 -1.25,0.25 -0.65,0.03 -1.66,1.16 -0.69,1.5 0.81,0.18 0.94,1.23 1.81,1.38 1.65,0.28 3.41,1.41 5.03,0.38 1.03,-0.89 2.23,0.62 3.34,0.28 0.54,-0.43 0.44,-1.69 -0.47,-1.47 -0.48,-0.01 -0.86,-0.33 -1.19,-0.06 -0.56,-1.04 -0.22,-1.97 -1.09,-2.88 -0.09,-0.86 -0.67,-0.98 -1.34,-0.97 z",
                   "department-59" : "M 377.51,2.78e-5 C 374.07,1.47 370.51,2.66 366.77,2.44 c -3.1,0.89 -6.29,1.6 -9.18,3.02 1.24,2.59 3.27,6.24 4.33,9.49 0.45,3.3 2.89,5.84 6.41,5.27 1.94,-0.78 4.85,1.64 1.47,1.89 -2.68,1.66 1.93,3.12 0.19,5.04 2.78,-0.45 4.23,3.9 7.14,2.5 1.81,1.18 3.37,-0.01 5.36,1.07 1.63,-1.32 3.21,-0.63 4.48,0.93 0.73,-1.57 2,-1.61 0.95,-3.07 1.61,-2.58 6.95,1.51 2.94,2.57 -2.83,1.01 0.34,3.73 -1.12,5.39 0.9,1.48 4.86,-1.3 3.65,1.61 2.92,-0.02 7.29,0 6.35,4.16 1.35,-0.92 3.57,-0.15 1.94,1.67 -3,0.14 -4.31,3.74 -1.12,5.07 1.69,0.96 2.08,2.48 0.62,3.67 0.34,2.55 4.5,0.15 4.8,3.09 2.64,0.43 -0.05,2.2 -0.9,2.42 1.06,1.6 0.36,2.77 -1.25,3.07 2.12,1.52 -1.64,2.22 0.07,4.15 -2.91,2.78 1.69,6.63 4.47,4.88 2.26,-1.32 5.08,2 6.87,-0.71 2.98,0.44 6.14,1.89 8.42,-1.06 1.98,-0.29 4.46,2.95 5.68,-0.34 2.9,-1.43 5.98,1.3 9.04,1.19 1.53,2.96 3.45,-0.56 5.79,0.04 -1.87,3.96 3.7,3.7 6.26,4.11 2.29,-0.95 -0.64,-4.29 2.61,-4.77 2.82,-0.8 0.92,-4.83 -0.55,-5.74 -3.06,0.67 -0.13,-3.85 -0.08,-5.37 1.87,-1.24 2.82,-4.03 -0.19,-4.26 -1.07,4.16 -2.1,-2.65 -4.39,-2.68 -1.69,-3.72 -4.82,-0.59 -7.62,-0.73 -2.37,-0.85 -5.7,-2.48 -7.81,-0.09 -1.66,4.51 -4.19,-2.36 -2.95,-4.64 0.52,-3.52 -3.24,-7.4 -6.77,-5.76 -1.77,0.07 0.3,-3.59 -2.48,-2.13 -2.41,2.31 -6.1,2.01 -8.29,-0.47 -0.77,-2.54 -0.39,-5.31 -1.88,-7.78 0.28,-2.25 0.31,-4.41 -2.29,-5.22 -0.57,-2.79 -2.95,-5.31 -5.75,-3.44 -2.32,0.87 -5.9,0.75 -6.52,3.6 -1.2,3.14 -4.3,-0.54 -6.47,-0.63 -1.62,-2.75 -3.49,-6.42 -7.19,-5.82 -1.19,-1.96 -1.69,-5.46 -1.07,-7.12 2.22,-2.65 -1.65,-4.24 -2.01,-6.55 C 378.49,2.6 378.6,1.01 377.51,3.38e-5 z M 405.6,54.52 l 0.01,0.01 -0.01,-0.01 z",
                  }
            }
        }
    }
);

}));

and here is the code for the broken script trying to handle onClick events;

$(function() {

$(".mapcontainer").mapael({
    map: {
        name: "france_departments"
            // Enable zoom on the map
            ,
        zoom: {
            enabled: true
        }
        // Set default plots and areas style,
        ,
        defaultArea: {
            attrs: {
                fill: "#f4f4e8",
                stroke: "#ced8d0",
                cursor: "pointer"
            },
            attrsHover: {
                fill: "#68BCFF"
            },
            eventHandlers: {
                click: function(e, id, mapElem) {
                    var newData = {
                        'areas': {}
                    };
                    if (mapElem.originalAttrs.fill == "#f4f4e8" && mapElem.paths.id == "department-59" ) {
                        newData.areas[id] = {
                            attrs: {
                                fill: "#0088db"
                            }
                        };
                        alert("test")
                    }
                    else if (mapElem.originalAttrs.fill == "#f4f4e8" && mapElem.paths.id == "department-75" ) {
                        newData.areas[id] = {
                            attrs: {
                                fill: "#0088db"
                            }
                        };
                        alert("test")
                    }
                    else if (mapElem.originalAttrs.fill == "#0088db") {
                        newData.areas[id] = {
                            attrs: {
                                fill: "#f4f4e8"
                            }
                        };
                    }

                    $(".mapcontainer").trigger('update', [newData]);

                }
            },
        }
    },


    // Customize some areas of the map
    areas: {
        "department-59": {
            tooltip: {
                content: "Nord (59)"
            },

        },
        "department-75": {
            value: "2268265",

            tooltip: {
                content: "Paris (75)"
            }

Below I will include 2 plunks, the first of which is the working version and the second is how I hope to refactor the code.

WORKING VERSION --

http://plnkr.co/edit/XXXNQcND54Iw3HirefMc?p=preview

BROKEN VERSION --

http://plnkr.co/edit/ExDmSj?p=preview

For the sake of simplicity I have cut the map down to two regions for this example.

Hopefully this post makes sense, if not I can provide more information/details of the problem if needed. Any help will be much appreciated!

Thanks

Answer 1

I just need to put "id" in the if statement. Feel a bit silly!

here is a plunk if it interests anyone;

if (mapElem.originalAttrs.fill == "#f4f4e8" && id == "department-59" ) {

http://plnkr.co/edit/0WfnSkQLQbQttK76aymA?p=preview

Thanks.