javascript - 创建巴西各州的热图

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>

有人可以向我解释这不会正确绘制巴西地图吗？我有一个与美国类似的工作示例。我正在使用https://datamaps.github.io/

控制台不产生错误

Answer 1

您必须设置自定义投影：

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>