Question

您好我一直在关注如何使用D3和Geo Json文件创建地理地图的示例。

到目前为止，我使用本书创建了以下没有问题： ħ**号码：//chimera.labs.oreilly.com/books/1230000000345/ch12.html#_projections

    </head>
    <body>
        <script type="text/javascript">

                    //Width and height
                    var w = 500;
                    var h = 300;

                    //Define map projection
                    var projection = d3.geo.albersUsa()
                                       .translate([w/2, h/2])
                                       .scale([500]);

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

                    //Create SVG element
                    var svg = d3.select("body")
                                            .append("svg")
                                            .attr("width", w)
                                            .attr("height", h);

                    //Load in GeoJSON data
                    d3.json("us-states.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>

使用这个json文件： https://dl.dropboxusercontent.com/u/49159198/us-states.json

当我尝试使用以下json文件创建世界地图时（格式与美国只有国家而不是国家一样），它不会出现。

https://dl.dropboxusercontent.com/u/49159198/countries.geo.json

美国地图以黑色的方式出现。在CSS中的路径中应用了一些笔划后，我可以看到地图在那里，但这不起作用，因为我需要稍后通过CSV中的数据编辑路径。

世界地图代码：

    </head>
    <body>
        <script type="text/javascript">

                    //Width and height
                    var w = 960;
                    var h = 480;



                    var projection = d3.geo.equirectangular()
                                      .translate([w/2, h/2])
                                     .scale([150]);

                                    var path = d3.geo.path()
                                        .projection(projection);

                    //Create SVG element
                    var svg = d3.select("body")
                                            .append("svg")
                                            .attr("width", w)
                                            .attr("height", h);

                    //Load in GeoJSON data
                    d3.json("countries.geo.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>

任何帮助都会很棒，因为它会帮助我的大学项目。

由于以下答案而更新

Answer 1

不要将albersUsa投影用于除美国之外的任何内容 - 它会剪切该区域之外的所有内容。相反，使用例如albers。

D3映射与geoJson美国地图工作但不是世界

1 个答案: