jQueryを使用してSVGマップ上の1つの領域のみを選択します。

Question

ラファエルの拡張機能Mapaelを使用して、インタラクティブマップを提供しています。これまでに複数の領域を選択し、クリックすると、今度は一度に1つの領域だけを選択するようにユーザーを制限できます。ここ

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

ここでも示されているマップは、複数の領域をクリックすることができますが、一度に1つの領域を選択できるようにしたいと思います。

私はかなり自分自身で解決策を考えてきましたが、私はコーダーが少しブロックされていると思っていましたし、ちょっとした助言をして正しい方向に向けることができました。私は.bind、.target、そしてmapleのafterUpdate機能を使って実験してきました。

私が最初にどの要素がクリックされていないことを確認するためにクリックしたときにソリューションがSVGパスをループするようなものができれば/青の塗りつぶしを持っており、そこから行くの？わからない

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

これは私にとっては少し複雑すぎるように思えますが、実際にどのように実装されるかはわかりません。

Answer 1

私はこの問題の解決策を見つけました。ここにはその問題があります。

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/