使用D3.js投影显示地图

Question

使用D3.js投影显示地图

3

我正在尝试使用D3.js和this geoJSON文件显示印度地图。当我在浏览器中运行以下HTML文件时，地图没有生成，并且控制台上没有错误提示。

我怀疑这与投影有关，因为当我从路径变量中移除投影时，在svg顶部确实可以看到一个小地图。我尝试了Mercator、Albers和其他投影方式，但似乎都不起作用。

代码:

<!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>

- Hyperbola

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Reid · Accepted Answer

当我使用你的代码，仅将印度的geojson更改为世界的geojson时，我得到了这个结果：

地图的焦点在非洲东海岸附近的[0,0]，这是d3中大多数投影的默认焦点。这也是为什么您在视口中看不到任何内容且没有错误。如果您将中心设置为（随便举个例子）[80,25]，则会更加聚焦于印度。

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

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

使用您的代码进行以下修改(.center([80,25]))和稍微放大(.scale(800))得到：

一个更精确的方法是找到印度的质心（在线确定），作为中心点，而不是我的估计。

每当您无法看到希望看到的内容时，请检查DOM以查看是否已绘制（但仅超出屏幕），或缩小以查看是否正在查看错误的位置。

为什么地图会在没有投影的情况下进行投影？因为经纬度对被解释为SVG上的像素位置，这就是为什么当您未为geoPath定义投影时，地图很小的原因。