Hola, estoy creando la aplicación React en la que intento hacer un mapa mundial usando D3. Quiero que cuando el usuario se desplace sobre un país específico, aparezca un círculo en el centroide de la ruta de ese país, pero para algunos países como "EE. UU.", "Francia", "Noruega" el centroide está un poco fuera de lugar porque partes de esos países están separadas entre sí.

Aquí está mi componente:

 import styles from './WorldMap.module.css' import * as d3 from "d3"; import {useEffect, useRef, useState} from "react"; import * as topojson from "topojson-client"; const WorldMap = () => { const svgRef = useRef(null) const pathRefs = useRef([]) let [mapJson, setMapJson] = useState(null) let [mapTopo, setMapTopo] = useState(null) let [tooltipCoordinates, setTooltipCoordinates] = useState([0,0]) useEffect(() => { d3.json("https://unpkg.com/world-atlas@2.0.2/countries-50m.json").then(data => setMapTopo(data)) }, []) useEffect(() => { if (!mapTopo) return; setMapJson(topojson.feature(mapTopo, mapTopo.objects.countries)) }, [mapTopo]) const projection = d3.geoMercator() .center([0, 60]) const path = d3.geoPath(projection); const handleMouseOver = (feature) => (e) => { const coordinates = path.centroid(feature) setTooltipCoordinates(coordinates) } return ( <svg className={styles.svg__map} ref={svgRef} viewBox={"0 0 900 400"}> <g> {mapJson?.features?.map((feature, i) => <path onMouseOver={handleMouseOver(feature)} className={styles.svg__country} ref={el => pathRefs.current[i] = el} key={i} d={d3.geoPath(projection)(feature)} />)} <circle cx={tooltipCoordinates[0]} cy={tooltipCoordinates[1]} r={6} fill={"#2e2eca"} /> </g> </svg> ) } export default WorldMap;

Obtengo datos de ruta de países como topojson y luego los convierto a json.

archivo css:

 .svg__map{ width: 100%; min-height: 65vh; background-color: #cbcccc; } .svg__country{ stroke-width: .5; stroke: #949292; }

Esta es una captura de pantalla del centroide para Noruega:

¿Hay alguna solución para esto, o tal vez alguna otra proyección geográfica para este tipo de cosas?