-3

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

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

1 回答 1

0

当您调用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>

于 2017-01-05T14:27:32.097 回答