D3 - O arquivo GeoJSON grande não mostra o mapa de desenho corretamente usando projeções
Estou tendo um problema ao desenhar esse arquivo GeoJSON que peguei no data.seattle.gov. Especificamente, estou usando o arquivo Shape, que pode ser encontradoaqui. Eu o convertei em um arquivo GeoJSON, onde forneci uma pequena amostra abaixo.
Ao usar o D3, eu esperava desenhar quais deveriam ser os diferentes distritos de Seattle (na verdade, não tenho certeza do que deveria ser e é por isso que estou desenhando ... ha ...), mas por algum motivo ele não está sendo exibido corretamente, apesar de os caminhos serem calculados corretamente.
Eu hospedei meu exemploaqui. Tentarei substituir esse link por um jsFiddle quando tiver tempo para configurá-lo. O problema é que o arquivo GeoJSON é muito grande, então não acho que o jsFiddle seria o ideal.
Meu código é bem simples ... Estou apenas acrescentando caminhos com base nos recursos do arquivo 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);
});
Infelizmente, sinto que está apenas mostrando um dos caminhos e não todos. No começo eu pensei que poderia ser porque havia algum tipo de preenchimento e eles estavam simplesmente se escondendo, mas eu coloquei ofill-opacity para 0 e isso também não ajudou.
Aqui está uma pequena amostra do arquivo 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"
}
},
...
O que acaba sendo atraído é algo assim ...
Qualquer ajuda seria muito apreciada.
EDIT: Desculpe, parece que a minha conta de aluno de volta quando se foi. Eu posso tentar recriar o exemplo mais tarde.