javascript - 值更改时，Raphael US SVG map 不会重新着色

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

我已经根据要推入对象（statesObject）的数组（美国）中的值（支持）为地图本身着色。

一切工作正常，直到我重新定义支持值-就像对象识别出这些值已更改一样，无论我做什么，地图都保持不变。

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

    $(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;
      }
    }

最佳答案

据我所知，当您进行了某些更改（尤其是来自外部输入，即单击按钮或更新字段）后，无法更新地图。

可能有点hacky，但是我发现最快的解决方案是通过删除地图并使用新值重新添加来重新绘制地图。

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>')，将其添加回页面中，因此可以重绘。