Рисование простого многоугольника с D3.js не работает ⇐ Javascript

[Anonymous]

Не могу найти проблему, почему многоугольник не нарисован со следующим кодом в D3: < /p>

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

var width = 650,
height = 225;

// Creates a projection of the Netherlands
var projection = d3
.geoMercator()
.center([5.5, 52.2]) // GPS coordinates of the center of the Netherlands
.scale(7000) // Adjust the scale as needed
.translate([width / 2, height / 2]);

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

// Creates the SVG that state paths and location points will be attached to
var d3_map = d3
.select(".svg")
.append("svg")
.attr("width", width)
.attr("height", height);

// Creates a 'g' (group) element within the SVG which states paths will be attached to
var states = d3_map.append("g").attr("class", "states");
var locations = d3_map.append("g").attr("class", "locations");

var mapFeatures = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[plot]],
},
properties: {
statcode: "PV20",
jrstatcode: "2024PV20",
statnaam: "Groningen",
rubriek: "provincie",
id: 1,
FID: "provincie_gegeneraliseerd.7ff1a1db-9761-46b4-b8c0-8962f9c49e5a",
},
id: "PV20",
},
],
};
console.log("Ontvangen coordinaten: ", mapFeatures.features[0].geometry.coordinates);

// Binds the data to the SVG and create one path per GeoJSON feature
states
.selectAll("path")
.data(mapFeatures.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", function (d) {
return d.properties.statnaam === "Groningen" ? "#1d92b5" : "grey";
})
.style("stroke", "black");

< /code>
Таким образом, график динамически заполнен. For example with the following coordinates: [[4.46658332590609, 51.9189952744721], [4.4665832076367, 51.9189932420877], [4.46660765324146, 51.918992768389], [4.46661899727716, 51.9189924976887], [4.46663310465063, 51.9189921587427], [4.46665520951266, 51.9189917026561], [4.46665580183947, 51.9189982690841], [4.46665885751841, 51.9189981222296], [4.46666937101816,8844, 51.9191898770815], [4.46639899390348, 51.9191872684845], [4.46639666721731, 51.9191518345738], [4.46639599771547, 51.9191419417015], [4.46639402603949, 51.9191104656227], [4.46639314503411, 51.91909670593], [4.46639029235821, 51.9190514701581], [4.46638744152916, 51.9190061445128], [4.46656804474943, 51,9189961435434], [4.466583332590609, 51,9189527444721] < / /p> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> P> PRIE
< /code>
Все, что я получаю, - это синий квадрат: изображение карты < /p>
Я пробовал различное масштабирование и центр () в проекции. Не мог понять, что случилось.

Подробнее здесь: https://stackoverflow.com/questions/794 ... oesnt-work