I am very new to d3 and topojson and I am trying to render a map of the UK to overlay some data onto later. I have taken a topojson file from an online repository which is clearly fine since GitHub can render it. I am running this in a view specific json file for rails with d3 and topojson installed using webpacker.
I am currently importing d3, topojson and the uk map json file:
import * as d3 from 'd3';
import * as topojson from 'topojson';
import * as uk from './uk.json';
Then I try to draw the map:
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()));
I get the error arcs is undefined
while running topology.feature(...)
If I pass uk.objects.GBR_adm2.geometries
to feature
is of type Feature but has no geometries.
I have a degree of success when passing uk.objects.GBR_adm2.geometries
to .data()
directly but I get the error coordinates is undefined
.
If I pass uk.objects.GBR_adm2
or uk.objects
to .data()
, nothing happens and I get no error.
I have tried all of these steps with another map and had the exact same outcome
I am trying to follow online tutorials but nobody seems to be running into these problems. Any help or advice is much appreciated.
Thanks a lot
Copyright Notice:Content Author:「liamthorne4」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/70230949/topojson-arcs-is-undefined-coordinates-is-undefined-o-is-undefined