为什么 d3 不喜欢这个 GeoJSON 文件？

问题描述 投票：0回答：1

有谁知道为什么 D3 无法渲染以下 GeoJSON？

<!DOCTYPE html>
<meta charset="utf-8">

<body>
  <svg width="960" height="720"></svg>
  <div id='neighborhoodPopover'> </div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo-projection@4"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

const nycGeoJson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "neighborhood": "Hamilton Heights",
        "boroughCode": null,
        "borough": null,
        "@id": null
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.96083942042421,
              40.81944719738439
            ],
            [
              -73.95280837990867,
              40.81581771326914
            ],
            [
              -73.9527010915481,
              40.81654806965256
            ],
            [
              -73.95171403863061,
              40.8179276097718
            ],
            [
              -73.95072698571312,
              40.81844695861872
            ],
            [
              -73.94803047114694,
              40.8221363829966
            ],
            [
              -73.94612073832833,
              40.82127625710196
            ],
            [
              -73.94475459746901,
              40.82419761694012
            ],
            [
              -73.94385337524001,
              40.82387305252829
            ],
            [
              -73.93918905697315,
              40.82999573657146
            ],
            [
              -73.948905,
              40.83406600000012
            ],
            [
              -73.949342,
              40.833982
            ],
            [
              -73.95015520996616,
              40.83439675981593
            ],
            [
              -73.95725896977153,
              40.82711730987318
            ],
            [
              -73.96127700238141,
              40.82169843098817
            ],
            [
              -73.96083942042421,
              40.81944719738439
            ]
          ]
        ]
      },
      "id": 169
    }
  ]
};

const projection = 
        d3.geoAlbers()
          .fitSize([width, height], nycGeoJson);

var path = d3.geoPath()
    .projection(projection);


svg.selectAll("path")
    .data(nycGeoJson.features)
    .enter().append("path")
    .attr("d", path)


</script>
</body>

渲染如下，这不是正确的路径：

enter image description here

它应该看起来像这样：

enter image description here

原始地图中还有许多其他功能以相同的方式渲染，所以我认为这是与 d3 渲染此地图数据的方式相关的一些工件，但我无法确定是什么导致 D3 渲染它方式。其他地图渲染库渲染此 GeoJSON 数据没有问题。

如果有人能就此分享任何见解，我将不胜感激。感谢您的时间和关注。

d3.js gis geojson d3-geo
1个回答
0
投票

您的纬度和经度值似乎以错误的顺序存储。如果颠倒坐标顺序，您可以看到预期的结果


//reverse coordinates
let coord = nycGeoJson.features[0].geometry.coordinates.map(item=>{return item.reverse()})

应该可以解决问题。

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

let nycGeoJson = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "neighborhood": "Hamilton Heights",
        "boroughCode": null,
        "borough": null,
        "@id": null
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -73.96083942042421,
              40.81944719738439
            ],
            [
              -73.95280837990867,
              40.81581771326914
            ],
            [
              -73.9527010915481,
              40.81654806965256
            ],
            [
              -73.95171403863061,
              40.8179276097718
            ],
            [
              -73.95072698571312,
              40.81844695861872
            ],
            [
              -73.94803047114694,
              40.8221363829966
            ],
            [
              -73.94612073832833,
              40.82127625710196
            ],
            [
              -73.94475459746901,
              40.82419761694012
            ],
            [
              -73.94385337524001,
              40.82387305252829
            ],
            [
              -73.93918905697315,
              40.82999573657146
            ],
            [
              -73.948905,
              40.83406600000012
            ],
            [
              -73.949342,
              40.833982
            ],
            [
              -73.95015520996616,
              40.83439675981593
            ],
            [
              -73.95725896977153,
              40.82711730987318
            ],
            [
              -73.96127700238141,
              40.82169843098817
            ],
            [
              -73.96083942042421,
              40.81944719738439
            ]
          ]
        ]
      },
      "id": 169
    }
  ]
};


//reverse coordinates
let coord = nycGeoJson.features[0].geometry.coordinates.map(item=>{return item.reverse()})

const projection = 
        d3.geoAlbers()
          .fitSize([width, height], nycGeoJson);

var path = d3.geoPath()
    .projection(projection);


svg.selectAll("path")
    .data(nycGeoJson.features)
    .enter().append("path")
    .attr("d", path)
  <svg width="960" height="720"></svg>
  <div id='neighborhoodPopover'> </div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-geo-projection@4"></script>

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.