Map Colombia in d3js, datamaps

Question

Map Colombia in d3js, datamaps

Navigation

#1 by (0 votes)

0

Please, this script does not show the map of Colombia, what is wrong or missing?

var map = new Datamap({element: document.getElementById('container'),
      scope: 'col'
    });

<!DOCTYPE html>
<meta charset="utf-8">
<body>
	<div id="container" style="position: relative; width: 700px; height: 450px;">&nbsp;</div>

	<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 src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.col.js"></script>

</body>

d3.js

asked by Jorge Londoño 23.09.2017 в 00:28

source

1 answer

sendRedirect JSP Java Jtable Editable in execution time BD postgresql

score 0 · Answer 1

It is necessary to write the setProjection method.

var map = new Datamap({
  element: document.getElementById('container'),
  scope: 'col',
  setProjection: function (element) {
    var projection = d3.geo.mercator()
        .center([-68, 4]) // [Longitud, Latitud]
        .scale(1200);
    var path = d3.geo.path().projection(projection);
    return { path: path, projection: projection };
  }
});

<div id="container" style="position: relative; width: 400; height: 550px"></div>

	<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 src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.col.js"></script>