Question

我尝试使用D3.js和this 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>

Answer 1

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

地图的焦点位于Afrcia东海岸的[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以查看它是否被绘制（但仅在屏幕外）或缩小以查看你是否在寻找错误的位置。

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

使用D3.js投影显示地图

1 个答案: