La función geoAzimuthalEqualArea() en d3.js se usa para dibujar la proyección de áreas iguales azimutales de Lambert a partir de los datos geojson proporcionados. Es una proyección que trata de mantener las características del terreno en sus tamaños relativos correctos mientras mantiene el sentido correcto de dirección desde el centro. El mundo aquí se proyecta sobre una superficie plana desde cualquier punto del globo.
Sintaxis:
d3.geoAzimuthalEqualArea()
Parámetros: este método no acepta ningún parámetro.
Valor devuelto: este método devuelve la proyección de áreas iguales acimutales.
Ejemplo 1: El siguiente ejemplo dibuja la proyección azimutal de áreas equivalentes de Lambert de América del Norte y América del Sur.
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:300px; height:700px;"> <center> <h4 style="color:green"> AzimuthalEqualArea Projection of America </h4> </center> <svg width="400" height="300"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // AzimuthalEqualArea projection var gfg = d3.geoAzimuthalEqualArea() .scale(width / 1.5 / Math.PI) .translate([width / 2, height / 2]); // Loading the json data d3.json("https://raw.githubusercontent.com/" + "janasayantan/datageojson/master/" + "america.json", function (data) { // Draw the map svg.append("g") .selectAll("path") .data(data.features) .enter().append("path") .attr("fill", "green") .attr("d", d3.geoPath() .projection(gfg) ) .style("stroke", "#ffff") }); </script> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo dibuja la proyección azimutal de áreas equivalentes de Lambert de África.
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:600px; height:300px;"> <center> <h4 style="color:green"> AzimuthalEqualArea Projection of Africa </h4> </center> <svg width="600" height="300"> </svg> </div> <script> var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"); // AzimuthalEqualArea var gfg = d3.geoAzimuthalEqualArea() .scale(width / 1.5 / Math.PI) .translate([width / 2, height / 2]); // Loading the json data d3.json("https://raw.githubusercontent.com/" + "janasayantan/datageojson/master/" + "geoAfrica.json", function (data) { // Draw the map svg.append("g") .selectAll("path") .data(data.features) .enter().append("path") .attr("fill", "olive") .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