오류를 반환하는 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이라고도 함)이며 위도 / 경도 형식을 사용합니다. 그러나 여러 국가 시스템이 존재한다는 것이 밝혀졌습니다. 귀하의 경우 영국 국가 시스템 OSGB36 입니다.

이 패키지를 사용 하여 프로젝션을 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/[email protected]/dist/proj4-src.js'></script>
<script src='https://unpkg.com/[email protected]/index.js'></script>
<svg id="partitionSVG" width="800" height="800">"</svg>

파일 생성에 대한 액세스 권한이있는 경우 입력 파일을 한 번 변경하거나 필요할 때마다이 함수를 호출 할 수 있습니다.