D3.js geoGnomonic()函数

D3.js 是一个 JavaScript 库，用于在 Web 浏览器中生成动态、交互式数据可视化。它利用可缩放矢量图形、HTML5 和级联样式表标准。

d3.js 中的geoGnomonic()函数用于绘制 gnomonic 投影，它是一种方位角投影，将大圆投影为直线，而与方面无关。

句法：

d3.geoGnomonic()

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

返回值：此方法从给定的 JSON 数据创建一个 gnomonic 投影。

示例 1：下面的示例以 (0,0) 为中心对世界进行了一个日光投影，并且没有旋转。

HTML

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

输出：

无旋转且以 (0,0) 为中心的日晷圆锥投影

示例 2：以下示例在自定义中心 (-20,-20) 并沿 Y 轴旋转 -90 度后对世界进行日光投影。

HTML

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

输出：