La biblioteca JavaScript D3.js proporciona visualizaciones de datos interactivas para páginas web mediante HTML5, gráficos vectoriales escalables y hojas de estilo en cascada. La función geoNaturalEarth2() en d3.js se utiliza para dibujar la proyección Natural Earth II que, en comparación con Natural Earth I, es un poco más alta y redonda.
Sintaxis:
d3.geoNaturalEarth2()
Parámetros: este método no acepta ningún parámetro.
Valor de retorno: este método crea la proyección de Natural Earth II a partir de datos JSON dados.
Ejemplo 1: El siguiente ejemplo crea la proyección NaturalEarth II del mundo con 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");
// NaturalEarth2 projection
// Center(0, 0) with 0 rotation
var gfg = d3.geoNaturalEarth2()
.scale(width / 1.8 / Math.PI)
.rotate([0, 0])
.center([0, 0])
.translate([width / 2, height / 2])
// Loading the json data
// Used json file stored at
// https://raw.githubusercontent.com/janasayantan
// /datageojson/master/world.json
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:
Ejemplo 2: En el siguiente ejemplo, crearemos la proyección NaturalEarth2 del mundo con centro en (0, 10) y girando 60 grados con respecto al eje Y.
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");
// NaturalEarth2 projection
// Center(0, 10) and 60 degree
// rotation w.r.t Y axis
var gfg = d3.geoNaturalEarth2()
.scale(width / 1.7 / Math.PI)
.rotate([60, 0])
.center([0, 10])
.translate([width / 2, height / 2])
// Loading the json data
// Used json file stored at
// https://raw.githubusercontent.com/janasayantan
// /datageojson/master/world.json
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