不突出显示的状态

Question

我想突出显示印度的一些邦。当我执行我的代码时，它在控制台中没有显示错误，但状态没有得到 highlighted.Please 帮助。

<div id="indian" style="position: relative;top:50px; width: 100%; height: 100%;"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="datamaps.ind.min.js"></script>
<script type="text/javascript">
var map = new Datamap({
  element: document.getElementById('indian'),
  scope: 'ind',
  fills: {
        defaultFill: '#ccc' 
    },
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(1000)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  }
});
var states = [ 'GJ', 'MH', 'KA', 'TN', 'AP', 'OR', 'WB', 'AS', 'UP', 'PB', 'HP', 'JK'];
$.each(states,function(index,state) {
    var sc = state;
    console.log(sc)
    map.updateChoropleth({[sc]:'#000'});
})

</script>

Answer 1

当您调用 updateChoropleth 时，它会查找分配给地图中每个区域的 class 个名称。对于此地图，那些 class 不仅是州缩写，而且是前缀为 IN. 的州缩写。此外，您不需要 一遍又一遍地调用updateChoropleth。构建一个哈希对象并调用它一次。最后，我不确定您为什么只为一个函数加载 jquery，而这里简单的 for 或 .forEach 就可以了。把这些放在一起：

var states = [ 'GJ', 'MH', 'KA', 'TN', 'AP', 'OR', 'WB', 'AS', 'UP', 'PB', 'HP', 'JK'],
    update = {};
states.forEach(function(d){
  update['IN\.' + d] = '#000';
});
map.updateChoropleth(update);

运行代码：

<div id="indian" style="width: 500px; height: 500px;"></div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/markmarkoh/datamaps/master/dist/datamaps.ind.min.js"></script>
<script type="text/javascript">
var map = new Datamap({
  element: document.getElementById('indian'),
  scope: 'ind',
  fills: {
        defaultFill: '#ccc' 
    },
  setProjection: function(element) {
    var projection = d3.geo.equirectangular()
      .center([80, 25])
      .scale(1000)
      .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
    var path = d3.geo.path()
      .projection(projection);

    return {path: path, projection: projection};
  }
});
var states = [ 'GJ', 'MH', 'KA', 'TN', 'AP', 'OR', 'WB', 'AS', 'UP', 'PB', 'HP', 'JK'],
    update = {};
states.forEach(function(d){
  update['IN\.' + d] = '#000';
});
map.updateChoropleth(update);

</script>

不突出显示的状态

States not highlighting

jquery

d3.js

topojson

datamaps