gpt4 book ai didi

javascript - D3 映射与 geoJson 美国 map 工作但不工作世界

转载 作者:行者123 更新时间:2023-12-02 18:06:03 25 4
gpt4 key购买 nike

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

到目前为止,我使用这本书创建了以下没有问题的内容:h**p://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

美国 map 显示为黑色长方形。在 CSS 中对路径应用一些描边后,我可以看到 map 就在那里,但这不起作用,因为我需要稍后通过 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>

任何帮助都会很棒,因为它将有助于我的大学项目。

因以下答案而更新

最佳答案

不要对除美国以外的任何地区使用 albersUsa 投影 - 它会裁剪该区域之外的所有内容。相反,使用例如阿尔伯斯

关于javascript - D3 映射与 geoJson 美国 map 工作但不工作世界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20100012/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com