gpt4 book ai didi

javascript - D3.js geoPath map 返回错误 : attribute d: Expected number

转载 作者:行者123 更新时间:2023-12-04 08:34:38 34 4
gpt4 key购买 nike

<分区>

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

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

Error: attribute d: Expected number, "….21478248741596,NaNL547.70469610…".

并显示这张图片(虽然漂亮,但不是我所希望的英格兰 map )

这是代码:

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>

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

谢谢你的建议

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com