0

以下に示すように、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>";
   }
 });

コンソールに次のエラーが表示されます。 データマップが定義されていません

コロプレスという名前のdatamap-github-pageで与えられた例だったので、うまく動作するはずでした。これについて私を助けることができる体はありますか?

4

1 に答える 1