Soy muy nuevo en d3 y topojson y estoy tratando de representar un mapa del Reino Unido para superponer algunos datos más adelante. Tomé un archivo topojson de un repositorio en línea que claramente está bien ya que GitHub puede procesarlo. Estoy ejecutando esto en un archivo json específico de vista para rieles con d3 y topojson instalados usando webpacker.
Actualmente estoy importando d3, topojson y el archivo json del mapa del Reino Unido:
import * as d3 from 'd3'; import * as topojson from 'topojson'; import * as uk from './uk.json';Luego trato de dibujar el mapa:
let svg = d3.select('#geo-plot'); let feature = topojson.feature(uk, uk.objects.GBR_adm2); svg.append("g") .selectAll("path") .data(feature) .join("path") .attr("fill", "#ed87c8") .attr("stroke", "white") .attr("stroke-width", 0.4) .attr("d", d3.geoPath(d3.geoMercator())); Obtengo que los arcs is undefined mientras ejecuto topology.feature(...)
Si paso uk.objects.GBR_adm2.geometries a feature es del tipo Feature pero no tiene geometrías.
Tengo cierto grado de éxito al pasar uk.objects.GBR_adm2.geometries a .data() directamente, pero obtengo las coordinates is undefined .
Si paso uk.objects.GBR_adm2 o uk.objects a .data() , no pasa nada y no aparece ningún error.
Probé todos estos pasos con otro mapa y obtuve exactamente el mismo resultado.
Estoy tratando de seguir los tutoriales en línea, pero nadie parece tener estos problemas. Cualquier ayuda o consejo es muy apreciado.
Muchas gracias