使用 D3.js 投影显示地图 | 投影显示地图

本文介绍了使用 D3.js 投影显示地图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用 D3.js 和

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

如果你设置你的中心，比如说(在我的脑海里)[80,25]你会更加以印度为中心:

 var 投影 = d3.geoMercator().center([80,25]).translate([w/2, h/2]).规模(800)；

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

使用带有此修改的代码 (.center([80,25])) 和一点点放大 (.scale(800)) 得到我:

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

当您无法看到您希望看到的内容时，请检查 DOM 以查看它是否已绘制(但仅在屏幕外)或缩小以查看您是否看错了位置.

为什么地图会在没有投影的情况下进行投影?因为 lat long 对被解释为 svg 上的像素位置，这就是当您没有为 geoPath 定义投影时地图很小的原因.

I'm trying to display India's map using D3.js and this geoJSON file. When I run the following HTML file in the browser, the map doesn't get generated, with no error on the console.

I suspect this has something to do with projection because when I remove the projection from the path variable, I do get a tiny map at the top of the svg. I tried Mercator, Albers and other projections but nothing seems to work.

Code:

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

解决方案

When I use your code, changing only the geojson of India to a geojson of the world, I get this:

The map is focused at [0,0], off the east coast of Afrcia. This is the default focus point of most projections in d3. This is also why you don't see anything in your viewport and don't see any errors.

If you set your center, to say (off the top of my head) [80,25] you'll be much more centered on India:

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

There are different ways to center a Mercator map, including using a rotation of the projection. Likewise, different map projections may be centered using different parameters or methods.

Using your code with with this modification (.center([80,25])) and a little bit of zooming in (.scale(800)) gets me:

A more precise method would be to find the centroid of India (online certainly) as the centering point rather than my guestimate.

Whenever you can't see what you had hoped to, check the DOM to see if it was drawn (but is only off screen) or zoom out to see if you are looking at the wrong place.

Why would the map project without a projection? Because the lat long pairs are interpreted as pixel locations on the svg, which is why the map is tiny when you don't define a projection for the geoPath.

这篇关于使用 D3.js 投影显示地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！