D3.js geoSatellite()函数

JavaScript D3.js库使用 HTML5、可缩放矢量图形和级联样式表为网页提供交互式数据可视化。 d3.js中的geoSatellite ()函数用于绘制卫星（倾斜透视）投影。

句法 ：

d3.geoSatellite()

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

返回值：此方法从给定的 JSON 数据创建卫星投影。

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

HTML

 
 
  
 
     
     
    
    
    
 
  
 
     
         
              
       
        
        
     
  
    
  
       var svg = d3.select("svg"),
       width = +svg.attr("width"),
       height = +svg.attr("height");
  
       // Satellite projection
       // Center(0,0) with 0 rotation
       var gfg = d3.geoSatellite()
                 .scale(width / 1.1 / 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", "SeaGreen")
              .attr("d", d3.geoPath()
                  .projection(gfg)
               )
              .style("stroke", "#ffff")
        })
    
 
  

输出：

示例 2：在以下示例中，我们将创建以 (0, -20) 为中心并相对于 Y 轴旋转 90 度的世界卫星投影。

HTML

 
 
  
 
     
    
    
    
    
 
  
 
     
         
          
        
          
         
         
     
  
    
  
        var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");
  
        // Satellite  projection
        // Center(0,-20) and 90 degree
        // rotation w.r.t Y axis
        var gfg = d3.geoSatellite()
                  .scale(width / 1.0/ Math.PI)
                  .rotate([90,0])
                  .center([0,-20])
                  .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){
  
           // Draw the map
           svg.append("g")
              .selectAll("path")
              .data(data.features)
              .enter().append("path")
              .attr("fill", "SlateBlue")
              .attr("d", d3.geoPath()
                  .projection(gfg)
              )
              .style("stroke", "#ffff")
        })
    
 
  

输出：