使用D3.js投影显示地图

Question

使用D3.js投影显示地图

我正在尝试使用D3.js和这个 geoJSON文件显示印度的地图.当我在浏览器中运行以下HTML文件时,不会生成映射,控制台上没有错误.

我怀疑这与投影有关,因为当我从路径变量中删除投影时,我确实在svg的顶部得到了一个小地图.我尝试了墨卡托,阿尔伯斯和其他预测,但似乎没有任何效果.

码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>India</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>

        <script type="text/javascript">

            //Width and height
            var w = 500;
            var h = 500;

            var projection = d3.geoMercator()
                            .translate([w/2, h/2])
                            .scale(500);

            //Define default path generator
            var path = d3.geoPath()
                        .projection(projection);


            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            var rectangle = svg.append("rect")
                        .attr("height", h).attr("width", w)
                        .attr("fill", "transparent")
                        .attr("stroke", "black")
                        .attr("stroke-width", 1);

            //Load in GeoJSON data
            d3.json("india.json", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)

        });

        </script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

And*_*eid 6

当我使用你的代码,只将印度的geojson改为世界的geojson时,我得到了这个:

该地图的重点[0,0]是Afrcia东海岸.这是d3 中大多数投影的默认焦点.这也是您在视口中看不到任何内容并且看不到任何错误的原因.

如果你设置你的中心,说(在我的头顶),[80,25]你将更加集中在印度:

       var projection = d3.geoMercator()
                        .center([80,25])
                        .translate([w/2, h/2])
                        .scale(800);

Run Code Online (Sandbox Code Playgroud)

有一些不同的方法可以使墨卡托地图居中,包括使用投影的旋转.同样地,可以使用不同的参数或方法来对中不同的地图投影.

使用你的代码与这个修改(.center([80,25]))和一点点放大(.scale(800))让我:

更精确的方法是找到印度的质心(当然是在线)作为中心点,而不是我的猜测.

每当你看不到你想要的东西时,检查DOM以查看它是否被绘制(但仅在屏幕外)或缩小以查看你是否在寻找错误的地方.

为什么没有投影的地图投影？因为lat long对被解释为svg上的像素位置,这就是为什么在没有为geoPath定义投影时地图很小的原因.

归档时间：	8 年，6 月前
查看次数：	843 次
最近记录：	7 年，11 月前