D3.js geoPath地图返回错误：<path>属性d：预期数字[重复]

Question

我在 D3.js 中绘制地图时遇到问题

以下代码适用于某些 json 文件，但在我需要使用的数据上，它会返回类似于以下的错误字符串：

错误：属性 d：预期数字，“….21478248741596,NaNL547.70469610…”。

并显示这张图片（虽然漂亮不是我希望的英格兰地图）

这是代码：

const width = 800
const height = 800

const svg = d3.select('svg')
  .append('g')
  .attr('class', 'map');

const projection = d3.geoMercator()

Promise.all([
  d3.json('https://raw.githubusercontent.com/joewretham/d3_map_project/main/Clinical_Commissioning_Groups__April_2019__Boundaries_EN_BUC.json')
]).then(
  d => ready(null, d[0], d[1])
);

function ready(error, data) {

  var fixed = data.features.map(function(feature) {
    return turf.rewind(feature, {
      reverse: true
    });
  });

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

  projection.fitSize([width, height], {
    "type": "FeatureCollection",
    "features": fixed
  })

  svg.append('g')
    .attr('class', 'countries')
    .selectAll('path')
    .data(fixed)
    .enter().append('path')
    .attr('d', path)
    .style('fill', "teal")
    .style('stroke', 'white')
    .style('opacity', 0.8)
    .style('stroke-width', 0.3);
};

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<svg id="partitionSVG" width="800" height="800">"</svg>

有人知道这里发生了什么吗？因为该代码适用于其他数据集，所以我知道这与坐标有关，我猜它们需要以某种方式进行转换，但我对地理数据了解得不够多，不知道该怎么做。

感谢您的任何建议

乔

Answer 1

您的 JSON 文件有一些不常见的投影。通常，坐标以纬度/经度给出。然而，由于许多原因，例如地球是一个球体，球体投影在数学上很困难，存在几种不同的投影。最常见的是 WGS84（根据其 ID 也称为 4326），并使用 lat/long 格式。但是，事实证明存在几个国家系统。在你的情况下，它是英国国家系统OSGB36。

使用this package，我能够将投影从 OSGB36 转换为 WGS84，得到正确的结果：

const width = 800
const height = 800

const svg = d3.select('svg')
  .append('g')
  .attr('class', 'map');

console.log(window);

const projection = d3.geoMercator()

Promise.all([
  d3.json('https://raw.githubusercontent.com/joewretham/d3_map_project/main/Clinical_Commissioning_Groups__April_2019__Boundaries_EN_BUC.json')
]).then(
  d => ready(null, d[0], d[1])
);

function ready(error, data) {
  data = returnExports.toWGS84(data);

  var fixed = data.features.map(function(feature) {
    return turf.rewind(feature, {
      reverse: true
    });
  });

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

  projection.fitSize([width, height], {
    "type": "FeatureCollection",
    "features": fixed
  })

  svg.append('g')
    .attr('class', 'countries')
    .selectAll('path')
    .data(fixed)
    .enter().append('path')
    .attr('d', path)
    .style('fill', "teal")
    .style('stroke', 'white')
    .style('opacity', 0.8)
    .style('stroke-width', 0.3);
};

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<script src='https://unpkg.com/proj4@2.6.2/dist/proj4-src.js'></script>
<script src='https://unpkg.com/gbify-geojson@0.2.1/index.js'></script>
<svg id="partitionSVG" width="800" height="800">"</svg>

如果您有权访问文件的生成，您可以更改输入文件一次，或者您可以在必要时调用此函数。