D3为geojson添加路径但不添加topojson
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了D3为geojson添加路径但不添加topojson相关的知识,希望对你有一定的参考价值。
我正在尝试使用D3显示地图。我有一个geoJSON文件和topoJSON文件相同的地图。当我加载geoJSON文件时,它会在页面上呈现,而<path>
标记会被d=...
填充。但是当我更改url以获取topoJSON文件时,<path>
标记仍为空,即使我将其余代码保持不变。 svg仍然使用topoJSON请求呈现,但没有任何内容出现。有关可能发生的事情的任何想法?
我的代码:
var width = 550;
var height = 570;
var arizonaProjection = d3.geoMercator()
.center([-111.6602, 34.2744])
.scale(4500)
.translate([width/2, height/2]);
var path = d3.geoPath()
.projection(arizonaProjection);
var svg = d3.select("#map").append("svg")
.attr("height", height)
.attr("width", width);
d3.json("geojson/Arizona.geojson", function(error, Arizona) {
svg.append("path")
.attr("d", path(Arizona));
console.log(path);
});
文件geojson/Arizona.geojson
存储在我本地服务器的不同目录中,topojson/Arizona.json
中的topojson文件也是如此。
topoJSON的示例:
"transform":{
"scale":[0.00003998538143372804,0.000031941344085415994],
"translate":[-114.81659,31.33218]
},
"objects":{
"Arizona_88_to_89":{
"type":"GeometryCollection",
"geometries":[
{
"arcs":[[0,1,2,3,4,5]],
"type":"Polygon",
"properties":{
"startcong":"88",
"district":"1",
"statename":"Arizona",
"member":{
"88":{"7845":{"party":"Republican","name":"Rhodes, John Jacob","district":"1"}},
"89":{"7845":{"party":"Republican","name":"Rhodes, John Jacob","district":"1"}}
},
"endcong":"89",
"id":"004088089001"
}
},{
"arcs":[[6,-5,7,-3,8,-1,9,10,11,12]],
"type":"Polygon",
"properties":{
"startcong":"88",
"district":"2",
"statename":"Arizona",
"member":{
"88":{"10566":{"party":"Democrat","name":"Udall, Morris K.","district":"2"}},
"89":{"10566":{"party":"Democrat","name":"Udall, Morris K.","district":"2"}}
},
"endcong":"89",
"id":"004088089002"
}
},{
"arcs":[[-12,13,-10,-6,-7,14]],
"type":"Polygon",
"properties":{
"startcong":"88",
"district":"3",
"statename":"Arizona",
"member":{
"88":{"10623":{"party":"Democrat","name":"Senner, Georg F., Jr.","district":"3"}},
"89":{"10623":{"party":"Democrat","name":"Senner, Georg F., Jr.","district":"3"}}
},
"endcong":"89",
"id":"004088089003"
}
}
]
}
geoJSON的示例:
{"type": "FeatureCollection", "features": [{"geometry": {"type": "MultiPolygon", "coordinates": [[[[-112.75515, 33.99991], [-112.75073, 33.99984], [-112.75034, 33.99992], [-112.74655, 33.99991], [-112.74509, 33.9999], [-112.7442, 33.9999], [-112.74395, 33.9999], [-112.74346, 33.99977], [-112.74331, 33.99973], [-112.74262, 33.99955],
d3 geopath采用geojson对象,而不是拓扑/ topojson对象。要将topojson与d3 geoPath一起使用,必须先将其转换回geojson。你可以用topojson.js很容易地做到这一点:
var featureCollection = topojson.feature(Arizona, Arizona.objects.counties)
当然,你可以将这些功能作为一个数组来实现:
var features = topojson.feature(Arizona, Arizona.objects.counties).features
以上假设topology.objects
包含县的财产,你必须看看你的topojson,看看县是否正确(我猜你可能会显示县)。如果您使用了mapshaper.org之类的工具,则属性名称可能与原始文件名相同。
以上是关于D3为geojson添加路径但不添加topojson的主要内容,如果未能解决你的问题,请参考以下文章
d3.js 地图:使用 geojson 文件和 CSV 数据
在 Plotly Density_Mapbox 上添加 GeoJSON 等高线作为图层