javascript - 当单击一个国家后比例或值发生变化时，JVectorMap Drill-Down 不会为区域着色

Question

我正在使用 JVectorMap 在 map 上显示一些访问数据。这是代码。

var euroMap =  new jvm.MultiMap({
      container: $('#map'),
      regionsSelectable: true,
    regionsSelectableOne: true,
      maxLevel: 1,
      main: {
        map: 'europe_mill',
        backgroundColor: 'transparent',
        regionStyle: {
          initial: {
            fill: 'white',
            "fill-opacity": 1,
            stroke: '#000',
            "stroke-width": 0.3,
            "stroke-opacity": 1
          },
        },
        series: {
          regions: [{
            scale: ['#FFFFFF', '#DB715C'],
            values: gon.map_data['ptps'],
            normalizeFunction: 'polynomial'
          }]
        },
        onRegionTipShow: function(event, label, index){
           label.html(
            '<b>'+label.html()+'</b></br>'+
            '<b>#{t 'navbar.views'}: </b>'+(gon.map_data['views'][index]==undefined ? "0" : gon.map_data['views'][index])+'</b></br>'+
            '<b>#{t 'navbar.ptps'}: </b>'+(gon.map_data['ptps'][index]==undefined ? "0" : gon.map_data['ptps'][index])+'</b></br>'+
            '<b>#{t 'navbar.payments'}: </b>'+(gon.map_data['payments'][index]==undefined ? "0" : gon.map_data['payments'][index])+'</b></br>'+
            '<b>Payed/Viewed: </b>'+(gon.map_data['v_p_ratio'][index]==undefined ? "0" : gon.map_data['v_p_ratio'][index])+'%<br/>'+
            '<b>Negotiated/Viewed: </b>'+(gon.map_data['v_n_ratio'][index]==undefined ? "0" : gon.map_data['v_n_ratio'][index])+'%<br/>'+
            '<b>Payed/Negotiated: </b>'+(gon.map_data['n_p_ratio'][index]==undefined ? "0" : gon.map_data['n_p_ratio'][index])+'%<br/>'
          );
        },
        onViewportChange: function(event, scale) {},
        onRegionOver: function(event, code) {},
        onRegionClick: function(event, code) {}
      },
      mapUrlByCode: function(code, multiMap){
        return '/assets/maps/'+code.toLowerCase()+'_'+multiMap.defaultProjection+'.js';
      }
    });

如果我有一个运行此代码(coffeescript)的下拉按钮，会发生什么情况:

$('.map_selector').click (event) ->
      event.preventDefault()
      map = $('#map .jvectormap-container').data('mapObject')
      map.series.regions[0].clear()
      
      map.series.regions[0].setValues(gon.map_data[event.currentTarget.dataset.filter])
      map.series.regions[0].setScale(['#FFFFFF', '#DB715C'])

它应该重置 map 比例和值，并根据新数据再次为 map 着色。

基础 map 是欧洲 map ，在这张 map 上工作时，一切正常，当我更改 map_selector 时，所有 map 颜色都会根据新值再次更改，但是当我单击任何国家/地区进行查看时该区域的数据不起作用，无论我更改 map_selector 多少次，区域都保持相同的颜色。

有人知道为什么吗？

提前致谢

Answer 1

最终我能够通过每次值更改时创建一个新的 map 实例来解决这个问题，因为在向下钻取 map 中每次更改值时它都会影响一般 map ，在我的例子中是欧洲，但不会影响子区域。

所以，而不是这个

map.series.regions[0].setValues

您必须生成 map 的新实例并重新加载值，然后才能正确填充向下钻取区域。