D3.js geoSinusoidal()函数

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

句法 ：

d3.geoSinusoidal()

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

返回：此方法从给定的 JSON 数据创建正弦投影。

示例 #1 ：以下示例创建世界的正弦投影，中心在 (0, 0) 并且没有旋转。

HTML

 
 
  
 
     
     
    
    
    
 
  
 
     
         
             
              
        
          
     
  
    
  
      var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
  
     // Sinusoidal projection
     // Center(0,0) with 0 rotation
     var gfg = d3.geoSinusoidal()
              .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：在下面的示例中，我们将创建以 (-10, 0) 为中心并相对于 Y 轴旋转 90 度的世界正弦投影。

HTML

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

输出：