如何動態地改變一個國家的顏色在地圖D3

Question

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); 

我想在2秒後更新特定國家的顏色。當我運行上面的代碼，功能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'); 
} 

功能按預期工作。爲什麼這不起作用？

Answer 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>