[英]D3 - Large GeoJSON File does not show draw map properly using projections
我在繪制從data.seattle.gov中提取的GeoJSON文件時遇到問題。 具體來說,我正在使用可在此處找到的Shape文件。 我將它轉換為GeoJSON文件,我在下面提供了一個小樣本。
通過使用D3,我希望得出西雅圖應該是不同的區域(實際上我不完全確定它應該是什么,這就是為什么我畫它...哈...)但由於某種原因盡管正確計算了路徑,但它沒有正確顯示。
我在這里舉辦了我的例子。 當我有時間設置它時,我會嘗試用jsFiddle替換這個鏈接。 問題是,GeoJSON文件非常大,所以我不認為jsFiddle是理想的。
我的代碼很簡單......我只是根據GeoJSON文件的功能添加路徑。
var width = 1000,
height = 1000;
var svg = d3.select("body")
.append("svg")
.attr("width", width + "px")
.attr("height", height + "px");
var projection = d3.geo.mercator()
.scale(150)
.translate([width/2, height/2]);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
d3.json("geojson/data.geo.json", function(data) {
console.log(data);
g.selectAll("path")
.data(data.features)
.enter()
.append("path")
.attr("d", path)
.attr("stroke", "black")
.attr("stroke-width", "5px")
.attr("fill-opacity", 0);
});
不幸的是,我覺得它只顯示其中一條路徑而不是所有路徑。 起初我以為可能是因為有某種填充而且它們只是隱藏在彼此之上,但我將fill-opacity
設置為0,這也沒有幫助。
以下是GeoJSON文件的一小部分示例。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-122.349453,
47.717771
],
[
-122.34948,
47.719585
],
[
-122.349504,
47.721403
],
[
-122.350214,
47.721404
],
...
[
-122.350337,
47.721405
],
[
-122.350258,
47.71596
],
[
-122.349425,
47.715958
],
[
-122.349453,
47.717771
]
]
]
},
"properties": {
"name": "B1",
"styleUrl": "#PolyStyle00",
"styleHash": "-59c62042",
"description": "<html xmlns:fo=\"http://www.w3.org/1999/XSL/Format\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\">\n\n<head>\n\n<META http-equiv=\"Content-Type\" content=\"text/html\">\n\n</head>\n\n<body style=\"margin:0px 0px 0px 0px;overflow:auto;background:#FFFFFF;\">\n\n<table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100;border-collapse:collapse;padding:3px 3px 3px 3px\">\n\n<tr style=\"text-align:center;font-weight:bold;background:#9CBCE2\">\n\n<td>B1</td>\n\n</tr>\n\n<tr>\n\n<td>\n\n<table style=\"font-family:Arial,Verdana,Times;font-size:12px;text-align:left;width:100;border-spacing:0px; padding:3px 3px 3px 3px\">\n\n<tr>\n\n<td>FID</td>\n\n<td>0</td>\n\n</tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>BEAT</td>\n\n<td>B1</td>\n\n</tr>\n\n<tr>\n\n<td>PRECINCT</td>\n\n<td>N</td>\n\n</tr>\n\n<tr bgcolor=\"#D4E4F3\">\n\n<td>Shape_Leng</td>\n\n<td>53375.265498</td>\n\n</tr>\n\n</table>\n\n</td>\n\n</tr>\n\n</table>\n\n</body>\n\n</html>\n\n"
}
},
...
最終被吸引的是這個......
非常感激任何的幫助。
編輯:對不起它似乎我的學生帳戶從回來的時候消失了。 我可以嘗試稍后重新創建該示例。
我看了你的問題。 問題似乎與地圖有關。 我遇到了與你相同的問題,雖然我沒有問題從你鏈接到的網站上的舊版(2008年之前)文件創建地圖。 Mapshaper (mapshaper.org)繪制兩個圖表都沒有問題,所以問題似乎與d3和這個特定的地圖有關。 我沒時間查看原因。
使用mapshaper簡化地圖(這可能是你想要做的事情)似乎會產生一個可以正確繪制的地圖:
ogr2ogr -f GeoJSON map_tmp.json spd_beats_wgs84.kmz
mapshaper -p 0.5 --repair -o map.json map_tmp.json
然后我可以使用以下代碼繪制地圖:
var width = 800;
var height = 500;
var vis = d3.select("#vis").append("svg")
.attr("width", width).attr("height", height);
d3.json("map.json", function(map) {
var projection = d3.geo.mercator().scale(1).translate([0,0]).precision(0);
var path = d3.geo.path().projection(projection);
var bounds = path.bounds(map);
var scale = .95 / Math.max((bounds[1][0] - bounds[0][0]) / width,
(bounds[1][1] - bounds[0][1]) / height);
var transl = [(width - scale * (bounds[1][0] + bounds[0][0])) / 2,
(height - scale * (bounds[1][1] + bounds[0][1])) / 2];
projection.scale(scale).translate(transl);
vis.selectAll("path").data(map.features).enter().append("path")
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
});
導致:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.