Question

我正在尝试使用D3在我的网页上显示地图。地理数据存在于geojson文件中。我使用以下代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <!--<LINK rel="stylesheet" href="style.css" type="text/css">-->

        <script type="text/javascript" src="../jslibs/d3_source/d3.v3.js"></script>
        <script src="http://d3js.org/topojson.v1.min.js"></script>

        <script>

        </script>
    </head>
    <body>
        <script type="text/javascript">
            d3.select("body")
                .append("p")
                .text("D3 is working");

            //Variables
            var map_width = 960;
            var map_height = 1160;

            //Append svg
            var svg = d3.select("body").append("svg") /*D3 is async. Do this in head to avoid page reorganisation when map arrives*/
                .attr("width", map_width)
                .attr("height", map_height);

            var projection = d3.geo.mercator()
                                .scale((map_width + 1) / 2 / Math.PI)
                                .translate([map_width / 2, map_height / 2])
                                .precision(.1);    //Define projection

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

            var g = svg.append("g");

            d3.json("./data/MyGeoJSON.geojson", function(error, ug) {
                if (error) return console.error(error);
                console.log(ug);

                g.selectAll("path")
                   .data(ug.features)
                   .enter()
                   .append("path")
                   .attr("d", path);

            });



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

我刚在页面上看到一个空白的SVG元素。没有地图被渲染。我已在http://geojsonlint.com/和http://geojson.io/检查了我的GeoJSON文件的有效性。此外，我可以在开发人员控制台上看到geojson对象。

我在网上和StackOverflow上看过一些教程，我不知道我哪里出错了。

用D3显示地图

0 个答案: