La función geoBoggs() en d3.js se usa para dibujar la proyección eumórfica de Boggs. La proyección eumórfica de Boggs es una proyección de mapa pseudocilíndrica de áreas iguales utilizada para mapas del mundo. Hace una proyección eumórfica de Boggs a partir de datos geo JSON dados.
Sintaxis:
d3.geoBoggs()
Parámetros: este método no acepta ningún parámetro.
Valor devuelto: este método devuelve la proyección de Boggs.
Ejemplo: El siguiente ejemplo hace la proyección Boggs de Asia.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<script src="https://d3js.org/d3.v4.js"></script>
<script src=
"https://d3js.org/d3-geo-projection.v2.min.js">
</script>
</head>
<body>
<div style="width:700px; height:500px;">
<center>
<h4 style="color:green">
Boggs Projection of Asia
</h4>
</center>
<svg width="500" height="200">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Boggs projection
var gfg = d3.geoBoggs()
.scale(width / 1.5 / Math.PI)
.translate([width / 2, height / 2])
// Loading the json data
d3.json(
"https://raw.githubusercontent.com/"
+ "janasayantan/datageojson/master/"
+ "geoasia.json",
function (data) {
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("fill", "black")
.attr("d", d3.geoPath()
.projection(gfg)
)
.style("stroke", "#ffff")
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por jana_sayantan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA