Question

我希望印度的一些州强调。当我执行我的代码时，它在控制台中没有显示错误，但状态没有突出显示。请帮助。

<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时，它正在寻找分配给地图中每个地区的类名。对于此映射，这些类不仅是州缩写，而且是以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>

国家没有强调

1 个答案: