Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/d3-array.v2.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { border: 1px solid red;}
</style>
</head>
<body>
<script>
d3.json('lan.json').then(geoData => {
const size = 400;
const mapData = topojson.feature(geoData, geoData.objects.lan);
const projection = d3.geoMercator();
projection.fitSize(
[size, size],
mapData.features);
const geoPath = d3.geoPath(projection);
const svg = d3.select('body').append('svg')
.attr('width', size)
.attr('height', size);
console.log(mapData.features)
svg.selectAll("path")
.data(mapData.features)
.enter().append("path")
.attr("d", geoPath);
})
</script>
</body>
https://d3js.org/d3.v5.min.js
https://d3js.org/topojson.v1.min.js
https://d3js.org/d3-geo.v1.min.js
https://d3js.org/d3-geo-projection.v2.min.js
https://d3js.org/d3-array.v2.min.js