My map looks like this, but i dont know why , but if I upload the map in the mapbox webside it looks good, and also in qgis ( my new maps )
const heightValue = 300;
const widthValue = 600;
const canvas = d3
.select("#contenedor")
.append("svg")
.attr("viewBox", `120 0 310 300`)
.attr("class", "mapContainer");
const strokeWidth = 1.5;
const margin = { top: 0, bottom: 20, left: 30, right: 20 };
let arrColores = [100, 200, 300, 450.5, 500, 600, 700, 800];
const numeroRegreso = (arr = []) => {
const longitud = arr.length;
const numeroAleatorio = parseInt(Math.random() * longitud);
return arr[numeroAleatorio];
};
const width = 600 - margin.left - margin.right - strokeWidth * 2;
const height = 300 - margin.top - margin.bottom;
d3.json("./data/mapas/coahuilav9Qgis.geojson").then((data) => {
console.log(data.features,'Tenemos la data')
let group = canvas.selectAll("g").data(data.features).enter().append("g");
console.log(group,'Tenemos el grupo');
let projection = d3.geoAlbers().fitExtent(
[
[0, 0],
[width, height],
],
data
);
let path = d3.geoPath().projection(projection);
let areas = group
.append("path")
.attr("d", path)
.attr("class", "area")
.attr("class", "bar")
.style("stroke", "white");
})
This is my Javascript code, and i have also compare with others maps and they work with my. code, but my maps does not.
The only difference between my new maps and the old ones are the properties fields .
The maps that I use and work are these mexico-geojson/states at main · PhantomInsights/mexico-geojson · GitHub