La función geoArmadillo() en d3.js se usa para dibujar la proyección Armadillo de los datos geojson dados. Es una proyección de mapa utilizada para mapas del mundo que se puede usar para mostrar la mayor parte del globo en lugar de la vista limitada de una perspectiva. No es conforme ni de áreas iguales. El centro asume un paralelo de 20° por defecto y se puede cambiar si se utiliza un paralelo diferente.
Sintaxis:
d3.geoArmadillo()
Parámetros: este método no acepta ningún parámetro.
Valor devuelto: este método devuelve la proyección de Armadillo.
Ejemplo 1: El siguiente ejemplo dibuja la proyección Armadillo del mundo.
HTML
<!DOCTYPE html>
<html>
<head>
<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:700px;">
<center>
<h3 style="color:green">
Armadillo Projection of World
</h3>
</center>
<svg width="700" height="350">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Armadillo projection
var gfg = d3.geoArmadillo()
.scale(width / 1.5 / Math.PI)
.translate([width / 2, height / 2]);
// Loading the json data
d3.json("https://raw.githubusercontent.com/" +
"janasayantan/datageojson/master/" +
"geoworld%20.json",
function (data) {
// Draw the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("fill", "blue")
.attr("d", d3.geoPath()
.projection(gfg)
)
.style("stroke", "#ffff")
});
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo dibuja la proyección Armadillo de Asia.
HTML
<!DOCTYPE html>
<html>
<head>
<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:500px; height:700px;">
<center>
<h3 style="color:green">
Armadillo Projection of Asia
</h3>
</center>
<svg width="600" height="350">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Armadillo projection
var gfg = d3.geoArmadillo()
.scale(width / 1.5 / Math.PI)
.center([100, 0])
.translate([width / 2, height / 2]);
// Loading the geojson 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", "grey")
.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