Question

我正在使用New Signature US地图插件处理交互式地图。您可以在此处查看我的代码：http://codepen.io/ann_kwilinski/pen/EKdGYW

我也将使用javascript作为初学者。

我需要在状态标签中添加一个活动状态，我真的不知道如何编写它。该插件具有悬停状态选项但不具有活动状态。

'click' : function(event, data) {
 $('#clicked-state')
 .text('Breathe Better Network partners in '+ data.name)
 .stop()
 .animate({backgroundColor: '#ddd'}, 1000);

// Populate List in Panel
                //var stateSelected = data.name;
                var stateContent = $('#'+data.name+'-li').html();
                // alert(stateContent);
                $("#state-list-response").html(stateContent);

                //Open Panel List
                $(".state-list-overlay").slideDown( "fast", function() {
                    $(".state-list-panel").slideDown( "fast", function() {
                        $(".state-list").fadeIn();
                  });
              });

                $("#map > svg > path").each(function(i){
                    $(this).css('fill', '');
                });
                $('#' + data.name).css('fill', '#26aedf');
                },


    });

如果有人能指出我如何做到这一点，我将不胜感激。

更新

我需要帮助将stateSpecificLabelStyles绑定到我已经拥有的click事件：

from plotly.offline import plot
from plotly.graph_objs import Scatter, Box

plot([Scatter(x=[1, 2, 3], y=[3, 1, 6])])

Answer 1

我认为您需要使用JQuery U.S Map的stateSpecificStyles属性：

$('#map').usmap({
  stateSpecificStyles: {
    'MD': {fill: 'yellow'},
    'VA': {fill: 'teal'}
  } 
});

由于'MD'和'VA'是MAP中的州代码。

更新：是的，您还可以绑定自己的Click事件，如：

    click: function(event, data) {

      // Output the abbreviation of the state name to the browser's console. Press f12 in your browser to see this result.
      console.log(data.name);

      // And when you have the state abbreviation, you can use the above example like this:
      stateSpecificStyles: {
        data.name: {fill: 'black'}
      }

    }

需要帮助制作活动状态单击jQuery Map上的状态标签

1 个答案: