Javascript的SVG錯誤

我有一系列的SVG地圖，我用jQuery顯示。當您進入第一頁時，美國地圖顯示在左側，初始狀態顯示在右側，突出顯示縣區域屬性。如果您單擊任何其他狀態，然後回到原始狀態，則屬性已消失。當用戶點擊左邊的國家時，我怎樣才能在這裏更改代碼，使每個州的屬性顯示在正確的節目上？我不希望這些屬性消失。這裏是代碼和正在發生的屏幕截圖。在第三個屏幕上，我需要像第一個屏幕一樣顯示屬性。Javascript的SVG錯誤

----- -----代碼

<script type="text/javascript"> 

      $('#mapsvg-usa').mapSvg({source: 'maps/usa.svg', width: 1200, responsive: 1, 
      colors: {background: 'transparent', hover: 4, selected: 10, stroke: '#ffffff'}, 
      tooltipsMode: 'names', 
      regions: {'CO': {selected: true}}, 
      onClick: function(){ 

       var file = 'usa-'+this.name.toLowerCase()+'.svg'; 

       console.log($('#mapsvg-states').html()); 

       if($('#mapsvg-states').find('svg').length){ 
       $('#mapsvg-states').mapSvg().destroy(); 
       } 

       $('#mapsvg-states').mapSvg({ 
        source : 'maps/counties/'+file, 
        //responsive: 1, 
        colors: {background: 'transparent', base: "#DDDDDD", stroke: '#ffffff'}, 
        width: $('#mapsvg-usa').width(), 
        height: $('#mapsvg-usa').height(), 
        tooltipsMode: 'combined', 
        zoomButtons: {show: true, location: 'right'}, 
        zoom: 1, 
        pan: 1 
       }); 

      } 
      }); 

      $('#mapsvg-states').mapSvg({ 
       source : 'maps/counties/usa-co.svg', 
       responsive: 1, 
       colors: {background: 'transparent', stroke: '#ffffff'}, 
       width: $('#mapsvg-usa').width(), 
       tooltipsMode: 'names', 
       zoomButtons: {show: true, location: 'right'}, 
       zoom: 1, 
       pan: 1, 
       regions: { 
        Douglas: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}}, 
        Jefferson: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}}} 
      }); 


     </script> 

     <script type="text/javascript"> 

      $('#maplinks a').on('click', function(e){ 
       e.preventDefault(); 
       var file = $(this).attr('data-svg'); 


       if($('#mapsvg-other').find('svg').length){ 
       $('#mapsvg-other').empty().mapSvg().destroy(); 
       } 

       $('#mapsvg-other').mapSvg({ 
        source : 'maps/'+file, 
        responsive: 1, 
        width: $('#mapsvg-other-cont').width(), 
        height: $('#mapsvg-other-cont').height(), 
        tooltipsMode: 'names', 
        zoomButtons: {show: true, location: 'left'}, 
        zoom: 1, 
        pan: 1 
       }); 

      }); 

     </script>

Here are the 3 screen captures show how the attributes disappear

來源

2014-06-17 hdebo3

上的狀態下點擊沒有包括像最初加載的數據的區域時所加載的地圖地圖。地區代碼複製到它

regions: { 
      Douglas: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}}, 
      Jefferson: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}} 
}

希望有所幫助。

來源

2014-06-28 04:22:39

Javascript的SVG錯誤

回答

相關問題