0

我需要将 datamap 世界图添加到 div 元素中的“maps-world” id 中，如下所示：

            <div id="maps-world" class="clearfix map"  style="position: relative; width: 80%; max-height: 450px;"></div>

以下是我添加的依赖项（所有依赖项都是本地的）

<script src="js/twitter/maps/d3.v3.min.js"></script> 
<script src="js/twitter/maps/datamaps.world.min.js"></script> 
<script src="js/twitter/maps/topojson.v1.min.js"></script>

以下是我用来生成世界图的代码：

var map = new Datamap({
    scope: 'world',
    element: document.getElementById('maps-world'),
    projection: 'mercator',
    height: 500,
    fills: {
      defaultFill: '#f0af0a',
      lt50: 'rgba(0,244,244,0.9)',
      gt50: 'red'
    },

data: {
  USA: {fillKey: 'lt50' },
  RUS: {fillKey: 'lt50' },
  CAN: {fillKey: 'lt50' },
  BRA: {fillKey: 'gt50' },
  ARG: {fillKey: 'gt50'},
  COL: {fillKey: 'gt50' },
  AUS: {fillKey: 'gt50' },
  ZAF: {fillKey: 'gt50' },
  MAD: {fillKey: 'gt50' }       
}
  })

  map.arc([
   {
    origin: {
        latitude: 40.639722,
        longitude: 73.778889
    },
    destination: {
        latitude: 37.618889,
        longitude: -122.375
    }
  },
  {
      origin: {
          latitude: 30.194444,
          longitude: -97.67
      },
      destination: {
          latitude: 25.793333,
          longitude: -0.290556
      }
  }
  ], {strokeWidth: 2});

 map.bubbles([
   {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
   {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
   {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},

 ], {
   popupTemplate: function(geo, data) {
     return "<div class='hoverinfo'>It is " + data.name + "</div>";
   }
 });

我在控制台中收到以下错误。 数据图未定义

由于它是名为 Choropleth 的datamap-github-page中给出的示例，因此预计它可以正常工作。任何机构都可以帮助我解决这个问题。

4

1 回答 1

1

我通过按以下顺序包含最新版本的库来解决此问题。

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script type="text/javascript" src="datamaps.world.min.js"></script>

在我的机器上运行它，它显示了带有区域和少量弧线和气泡的地图。

希望这可以帮助。

于 2015-06-17T13:05:56.633 回答