D3.js geoNaturalEarth2()函数

JavaScript D3.js库使用 HTML5、可缩放矢量图形和级联样式表为网页提供交互式数据可视化。
d3.js中的geoNaturalEarth2 ()函数用于绘制Natural Earth II投影，与Natural Earth I相比， Natural Earth I略高且圆润。

句法：

d3.geoNaturalEarth2()

参数：此方法不接受任何参数。

返回值：此方法从给定的 JSON 数据创建 Natural Earth II 投影。

示例 1：以下示例创建以 (0, 0) 为中心且无旋转的世界的 NaturalEarth II 投影。

 
 
  
 
     
     
     
     
     
 
  
 
     
         
             
     
     
     
     
  
     
  
    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") 
        }) 
     
 
  
 

输出：

示例 2：在下面的示例中，我们将创建以 (0, 10) 为中心并相对于 Y 轴旋转 60 度的世界的 NaturalEarth2 投影。

 
 
  
 
     
     
     
     
     
 
  
 
     
         
             
     
     
     
     
  
     
  
    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") 
        }) 
     
 
  
 

输出：