Выберите только одну область на SVG-карте, используя jQuery

Question

Я использую Mapael, расширение Рафаэля, чтобы доставить интерактивную карту, пока я ее закодировал, чтобы вы могли выбрать несколько областей и сделать элемент div видимым в соответствии с областью и теперь я хотел бы иметь возможность ограничить пользователя только выбором одной области за раз.

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

Опять же, схема, показанная здесь, позволяет выбрать несколько областей, однако я хотел бы сделать это так, вы можете просто выбрать одну область, в то время.

Я пробовал в течение довольно долгого времени придумывать решение самостоятельно, однако, я думаю, что у меня были кодеры, и я мог сделать с небольшим советом, чтобы указать мне в правильном направлении. Я экспериментировал с .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 при первом нажатии, чтобы гарантировать, что ни один из элементов не была нажата/имеет синий цвет заливки, а затем собирается оттуда? Хотя это звучит немного сложнее для меня, и я не уверен, как это будет реализовано на практике.

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/