Javascript SVG错误

Question

我有一系列用jquery显示的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>

​

​

Answer 1

单击某个州时加载的地图不会像最初加载的地图那样包含区域数据。将区域代码复制到其中

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

希望这能有所帮助。