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>') 将其添加回页面从而允许重绘 .

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

Raphael US SVG map not recoloring when values change

javascript

jquery

svg

raphael