はブラジル

Question

に

//var map = new Datamap({element: document.getElementById('container')}); 
 
var colors = d3.scale.category10(); 
 
var arcs = new Datamap({ 
 
    element: document.getElementById("container"), 
 
    scope: 'bra' 
 
});

<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 src="./datamaps.bra.min.js"></script> 
 
<div id="container" style="position: relative; width: 1540px; height: 900px;"></div>

の状態のヒートマップを作成すると、誰かが、これは正しくブラジルのマップを描画しません。私に説明することはできますか？私はこれに似た実例を米国に持っています。私は、コンソールが

Answer 1

カスタム投影を設定する必要がエラーを生成しないhttps://datamaps.github.io/

を使用しています：

var map = new Datamap({ 
 
    scope: 'bra', 
 
    element: document.getElementById('container'), 
 
    setProjection: function(element) { 
 
     var projection = d3.geo.equirectangular() 
 
      .center([-55.908333, -18.19638]) 
 
      .scale(1000) 
 
      .translate([element.offsetWidth/2, element.offsetHeight/2]); 
 
     var path = d3.geo.path() 
 
      .projection(projection); 
 

 
     return { 
 
      path: path, 
 
      projection: projection 
 
     }; 
 
    }, 
 
})

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
    <script src="https://d3js.org/topojson.v1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.4.4/datamaps.bra.js"></script> 
 
<div id="container" style="position: relative; width: 1540px; height: 900px;"></div>