用geoJSON渲染d3
我有一个geoJSON文件，我正在尝试使用d3渲染，但是很难将正确的特性作为投影。
目前，我一直在使用许多us.json示例中的d3文件，但我目前正在处理的地图使用的是美国的“通勤区”(CZ)，而不是土地、州或县。
我习惯打电话
topojson.feature(us, us.objects.states)然而，为了显示正确的图层，我的文件没有组织成对象，也没有多个层。下面是我试图使用的geoJSON文件的摘录：
{"type":"FeatureCollection","bbox":[-120.30602148510043,6.667736880597216,-70.95829310710806,34.46308750538215],"features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-83.802805983004,22.64602264051764],[-83.8080569412408,22.638128812605782],下面是我的代码，它在呈现时没有成功：
d3.json("CZ90.zip.geojson", function(error, us) {
if (error) throw error;
d3.select("svg").append("path")
.datum(topojson.feature(us, us.CZ90))
.attr("d", d3.geo.path());
});由于没有对象，所以我省略了".object“，当我将文件放到Mapshaper中时，它用一个名为"CZ90”的图层正确地呈现，这就是我如何编写"us.CZ90“而不是"us.objects.states”的方法。
我意识到我调用的是"topojson.feature“，而不是特定于geoJSON的东西，但我也无法成功地将文件转换为Mapshaper中的topoJSON，而不会丢失投影类型/info。
在.datum调用中，针对这个层的正确方法是什么？
如果我能够找到一个topoJSON文件，比如包含通勤区域层的us.json，那么整个问题也会得到解决！
回答 2
Stack Overflow用户
发布于 2017-07-18 00:28:15
最后得到了我的一位开发者朋友的帮助，答案比我的问题简单得多。
似乎d3.json()本机适合在不使用datum()的情况下读取geoJSON文件的结构，只需调用：
d3.json("CZ90.zip.geojson", function(error, geoData) {
d3.select("svg").append("path")
.attr("d", path(geoData));
}注意:这是使用d3.v4
下面是能够成功呈现映射的完整脚本：
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: #ccc;
stroke: #fff;
stroke-linejoin: round;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var width = 960;
var height = 620;
var chosenProjection = d3.geoMercator()
.scale(600)
.translate([1300, 450])
var path = d3.geoPath()
.projection(chosenProjection);
d3.json("CZ90.zip.geojson", function(error, geoData) {
d3.select("svg").append("path")
.attr("d", path(geoData));
});
</script>希望这能帮到被困在这么简单的路障上的人！
Stack Overflow用户
发布于 2017-03-22 02:37:59
我在这里可能遗漏了一些东西，但是如果您看一下topojson文档，您会注意到topojson.feature：
返回给定拓扑中指定对象的GeoJSON特性或FeatureCollection。如果指定的对象是GeometryCollection，则返回一个FeatureCollection，并且集合中的每个几何都映射到一个特性。否则，将返回一个功能。
在d3文档中，您将注意到一个d3重力场：
呈现给定对象，这可能是任何GeoJSON特性。
因此，在以下方面：
我意识到我是在叫"topojson.feature“而不是geoJSON专用的东西
您已经在使用特定于geoJSON的东西了，您将只使用topojson.js将您的topoJSON转换回geoJSON，以便在D3映射中使用它。因此，在回答你的问题时：
在.datum调用中，针对这个层的正确方法是什么？
正确的方法是简单地使用：
.datum(us) // feature collection or single feature这将追加一个路径，但如果您想要用相同的数据集追加多个路径(例如用于不同的着色或鼠标交互)：
.data(us.features) // feature collectionhttps://stackoverflow.com/questions/42906648
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号