D3.js es una biblioteca de JavaScript para producir visualizaciones de datos dinámicas e interactivas en navegadores web. Hace uso de los estándares Scalable Vector Graphics, HTML5 y Cascading Style Sheets.
La función geoEckert2() en d3.js se usa para dibujar la proyección Eckert II, que es una proyección de mapa pseudocilíndrica de áreas iguales. En el aspecto ecuatorial, la red de líneas de longitud y latitud consta únicamente de líneas rectas, y el límite exterior tiene la forma distintiva de un hexágono alargado.
Sintaxis:
d3.geoEckert2()
Parámetros: este método no acepta ningún parámetro.
Valor de retorno: este método crea una proyección Eckert2 a partir de datos JSON dados.
Ejemplo 1: El siguiente ejemplo hace una proyección Eckert2 del mundo con el centro en (0,0) y sin rotación.
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:600px;">
<center>
<h3 style="color:grey">
Eckart II Projection of World
</h3>
</center>
<svg width="700" height="550">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Eckart2 projection
var gfg = d3.geoEckert2()
.scale(width / 1.5 / Math.PI)
.rotate([0,0])
.center([0,0])
.translate([width / 2, height / 2])
// Loading the json data
d3.json("https://raw.githubusercontent.com/"
+ "janasayantan/datageojson/master/world.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:
Ejemplo 2: El siguiente ejemplo hace una proyección Eckert II del mundo con el centro en (0,0) y girando 45 grados con respecto al eje X.
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:600px;">
<center>
<h3 style="color:grey">
Eckart II Projection of World
</h3>
</center>
<svg width="700" height="550">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Eckart2 projection
// Center(0,0) and rotating 45 degree
var gfg = d3.geoEckert2()
.scale(width / 1.5 / Math.PI)
.rotate([45,0])
.center([0,0])
.translate([width / 2, height / 2])
// Loading the json data
d3.json("https://raw.githubusercontent.com/"
+ "janasayantan/datageojson/master/world.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