如何在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>

Answer 2

这似乎对我有用

<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" class="world-map"></div>
      <script>
        // https://github.com/markmarkoh/datamaps
        // https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3

        var defaultColor = '#c3c3c3';
        var activeColor = '#00b3c6';
        var highlightColorHover = '#037582';
        var highlightBorderColor = '#037582';

        var map = new Datamap({
          element: document.getElementById('map'),
          responsive: false,
          fills: {
            defaultFill: defaultColor
          },
          geographyConfig: {
            highlightFillColor: highlightColorHover,
            highlightBorderColor: highlightBorderColor,
          },
        });

        map.updateChoropleth({
          USA: activeColor,
          MEX: activeColor,
          PAN: activeColor,
          ARG: activeColor,
          BRA: activeColor,
          CHL: activeColor,
          COL: activeColor,
          AUT: activeColor,
          BEL: activeColor,
          BGR: activeColor,
          DNK: activeColor,
          FIN: activeColor,
          FRA: activeColor,
          DEU: activeColor,
          HUN: activeColor,
          IRL: activeColor,
          ITA: activeColor,
          LTU: activeColor,
          NLD: activeColor,
          POL: activeColor,
          PRT: activeColor,
          ROU: activeColor,
          RUS: activeColor,
          ESP: activeColor,
          SWE: activeColor,
          CHE: activeColor,
          TUR: activeColor,
          GBR: activeColor,
          CHN: activeColor,
          IND: activeColor,
          JPN: activeColor,
          MYS: activeColor,
          PAK: activeColor,
          SGP: activeColor,
          AUS: activeColor,
          ARE: activeColor,
          ZAF: activeColor,
        });
      </script>

如何在d3地图上动态改变一个国家的颜色

How to dynamically change the color of a country on d3 map

javascript

d3.js

datamaps