javascript - Displaying a map using D3.js projection

Question

Welcome To Ask or Share your Answers For Others

javascript - Displaying a map using D3.js projection

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Displaying a map using D3.js projection

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:24:43+0000

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.

Categories

javascript - Displaying a map using D3.js projection

javascript - Displaying a map using D3.js projection

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags