Как динамически изменить цвет страны на карте d3

var COLOR = 'blue';
var map = new Datamap({
  element: document.getElementById('map'),
  responsive: false,
});

function changeColor(countryCode) {
  map.updateChoropleth({
    countryCode: COLOR
  });
}

setInterval(function() {
  changeColor('USA');
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
<div id="map"></div>

У меня есть следующий javascript, который отображает карту мира на HTML.

var map = new Datamap({
  element: document.getElementById('map'),
  responsive: true,
});

function changeColor(countryCode) {
  map.updateChoropleth({
    countryCode: 'blue'
  });
  console.log(countryCode + '--> colorChange');
}

setInterval(function() {
  changeColor('USA');
}, 2000);

Я хочу обновить цвет конкретной страны после 2s. когда я запускаю приведенный выше код, функция changeColor вызывается после каждых 2s, но функция map.updateChoropleth , похоже, не имеет никакого эффекта. В случае, если я изменю следующий фрагмент: 

function changeColor(countryCode) {
  map.updateChoropleth({
    countryCode: 'blue'
  });
  console.log(countryCode + '--> colorChange');
}

К 

function changeColor(countryCode) {
  map.updateChoropleth({
    "USA": 'blue'
  });
  console.log(countryCode + '--> colorChange');
}

Функция работает, как и ожидалось. Почему бы и нет работа?

1 2
javascript d3.js

1 ответ:

Функция updateChoropleth ищет ключ свойства с буквальным именем countryCode.

Решение-это заполнение объекта и передача его функции: 

var COLOR = 'blue';
var map = new Datamap({
  element: document.getElementById('map'),
  responsive: false,
});

function changeColor(countryCode) {
  var obj = {};
  obj[countryCode] = COLOR;
  map.updateChoropleth(obj);
}

setInterval(function() {
  changeColor('USA');
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.world.min.js"></script>
<div id="map"></div>
3