Question

我在绘制从data.seattle.gov中提取的GeoJSON文件时遇到问题。具体来说，我正在使用可以找到here的Shape文件。我将它转换为GeoJSON文件，我在下面提供了一个小样本。

通过使用D3，我希望能够得出西雅图不同的区域（实际上我并不完全确定它应该是什么，这就是为什么我要画它...哈...）但是由于某些原因，尽管正确计算了路径，但它并未正确显示。

我举办了我的例子here。当我有时间设置它时，我会尝试用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"
        }
    },
    ...

最终被吸引的是这个......

D3 Drawing of GeoJSON File...

非常感谢任何帮助。

编辑：对不起，我的学生帐户似乎已经过时了。我可以稍后尝试重新创建这个例子。

Answer 1

我看了你的问题。问题似乎与地图有关。我遇到了与你相同的问题，虽然我没有问题从你链接到的网站上的旧版（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");
});

导致：

enter image description here

D3 - 大型GeoJSON文件未使用投影正确显示绘图

1 个答案: