Штаты не выделяют

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>