D3.js geoEquirectangular()函数

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

d3.js 中的 geoEquirectangular()函数用于绘制 equirectangular 投影，这是一种简单的地图投影，归因于托勒密声称发明了该投影的马里努斯 (Marinus of Tyre)。

句法：

d3.geoEquirectangular()

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

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

示例 1：以下示例以 (0,0) 为中心进行世界的 Equirectangular 投影，并且没有旋转。

HTML

  

    
    
  
    
    
    
    

  

    
  
        
        
    
  
    
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // Equirectangular  projection
        // Center(0,0) and no rotation
        var gfg = d3.geoEquirectangular()
            .scale(width / 1.5 / 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) {
  
                // Draw 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：以下示例通过更改中心和旋转来制作世界的 Equirectangular 投影。

HTML

  

    
    
    
    

  

    
        
        
    
  
    
        var svg = d3.select("svg"),
            width = +svg.attr("width"),
            height = +svg.attr("height");
  
        // Equirectangular  projection
        // Center(0,10) and 45 degree 
        // anticlock rotation
        var gfg = d3.geoEquirectangular()
            .scale(width / 1.5 / Math.PI)
            .rotate([45, 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) {
  
                // 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")
            })
    

  

输出：

具有 45 度逆时针旋转并以 (0,10) 为中心的等距矩形投影