JavaScript SVG 错误

Question

我有一系列用 jquery 显示的 SVG map 。 进入第一页时，左侧显示美国 map ，右侧显示初始状态，并突出显示县域属性。 如果你点击任何其他状态，然后回到原来的状态，属性就消失了。 我如何更改此处的代码，使每个州的属性在右侧显示县，当用户单击左侧的州时？ 我不希望属性消失。 这是代码和正在发生的事情的屏幕截图。在第三个屏幕上，我需要像第一个屏幕一样显示属性。

-----代码-----

<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

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

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

希望对您有所帮助。