D3.js geoPath map returning Error: <path> attribute d: Expected number

Question

我在 D3.js

中绘制地图时遇到问题

下面的代码适用于一些 json 文件，但在我需要使用的数据上，它返回一串类似于此的错误：

Error: attribute d: Expected number, "….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 文件有一些不常见的投影。通常，坐标在 lat/long 中给出。然而，由于许多原因，例如地球是一个球体并且球体投影在数学上很困难，因此存在几种不同的投影。最常见的是 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>

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

D3.js geoPath map returning Error: <path> attribute d: Expected number

D3.js geoPath map returning Error: <path> attribute d: Expected number

javascript

maps

json

geojson

d3.js