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 geoGnomonic() en d3.js se usa para dibujar la proyección gnomónica, que es una proyección azimutal que proyecta grandes círculos como líneas rectas, independientemente del aspecto.
Sintaxis:
d3.geoGnomonic()
Parámetros: este método no acepta ningún parámetro.
Valor de retorno: este método crea una proyección gnomónica a partir de datos JSON dados.
Ejemplo 1: El siguiente ejemplo hace una proyección gnomónica 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:500px;">
<center>
<h3 style="color:black"></h3>
</center>
<svg width="600" height="450">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Gnomonic projection
// Center(0,0) with 0 rotation
var gfg = d3.geoGnomonic()
.scale(width / 1.8 / 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){
// Drawing 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:
Proyección cónica gnomónica sin rotación y centrada en (0,0)
Ejemplo 2: El siguiente ejemplo hace una proyección gnomónica del mundo después de personalizar el centro (-20,-20) y rotar el eje Y de -90 grados.
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>
<h3 style="color:black"></h3>
</center>
<svg width="600" height="450">
</svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Gnomonic projection
// Center(-20,-20) and -90 degree
// rotation w.r.t Y axis
var gfg = d3.geoGnomonic()
.scale(width / 1.3 / Math.PI)
.rotate([0,-90])
.center([-20,-20])
.translate([width / 2, height / 2]);
// Loading the json data
d3.json("https://raw.githubusercontent.com/"
+ "janasayantan/datageojson/master/world.json",
function(data){
// Drawing the map
svg.append("g")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("fill", "slategrey")
.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