值更改时，Raphael US SVG 地图不会重新着色

Question

我正在使用这个基于 Raphael 的地图编写一些代码，它是一个 SVG jQuery 插件：http://newsignature.github.io/us-map/

我已根据已推入对象 (statesObject) 的数组 (USA) 中的值 (支持) 为地图本身着色。

这一切都很好，直到我重新定义支持值 - 就像对象识别出这些值发生了变化一样，无论我做什么，地图都保持不变。

欢迎您提供任何建议。相关代码如下。

    $(document).ready(function() {
      colorMap();
    });

    function colorMap(){
      var statesObject = {};
      for(var i = 0; i < USA.length; i++) {
        var national = (USA[i]);
        var colorState = national.id;
        if (national.support < 50) {
          statesObject[colorState] = {fill: '#cd3700'};
        } else if (national.support >= 50){
          statesObject[colorState] = {fill: '#232066'}
        }
      }
      $('#map').usmap({stateSpecificStyles: statesObject})
    }

    function nationalChange(){
      for(var i = 0; i < USA.length; i++) {
        var national = (USA[i]);
        national.support += 5;
      }
    }

Answer 1

据我所知，当您更改某些内容时无法更新地图，尤其是通过外部输入，即单击按钮或更新字段。

这可能有点老套，但我发现最快的解决方案是重绘地图，方法是删除地图并重新添加新值。

function redrawMap() {
  $('#map').remove()

  var statesObject = {};

  for(var i = 0; i < USA.length; i++) {
    var colorState = USA[i].id
    if (USA[i].support < 50) {
      statesObject[colorState] = {fill: '#cd3700'}
    } else if (USA[i].support >= 50){
      statesObject[colorState] = {fill: '#232066'}
    }
  }

  $('#container').append('<div id="map"></div>')

  $('#map').usmap({ stateSpecificStyles: statesObject })
}

关键部分是$('#map').remove()，它将地图从页面中删除，然后$('#container').append('<div id="map"></div>') 将其添加回页面，从而允许重绘。