Я хотел бы нарисовать несколько полигонов поверх моей карты .svg, реализованной с помощью программы ниже.Полигоны указаны в отдельном файле .json (см. Пример).Можно ли сделать это, используя функцию «рисования», как для карты?Есть ли лучшие способы?К сожалению, я не эксперт по HTML и не мог найти, как это сделать.Кто-нибудь может мне помочь?
<!DOCTYPE html>
<html>
<head>
<title>World Map</title>
<meta charset="utf-8">
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<style>
path {
fill: red;
stroke: #000;
stroke-width: .1px;
}
.graticule {
fill: none;
stroke: #000;
stroke-width: .2px;
}
.foreground {
fill: none;
stroke: #333;
stroke-width: 1.2px;
}
</style>
</head>
<body>
<svg width="960" height="600"></svg>
<script>
const svg = d3.select("svg")
const myProjection = d3.geoAitoff()
const path = d3.geoPath().projection(myProjection)
const graticule = d3.geoGraticule()
function drawMap(err, world) {
if (err) throw err
svg.append("g")
.selectAll("path")
.data(topojson.feature(world, world.objects.land).features)
.enter().append("path")
.attr("d", path);
svg.append("path")
.datum(graticule.outline)
.attr("class", "foreground")
.attr("d", path);
}
d3.json("https://unpkg.com/world-atlas@1.1.4/world/50m.json", drawMap)
</script>
</body>
</html>
Файл .json:
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": {
"fill": "#ffff00"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[50.0, 0.0], [-50.0, 0.0], [0.0, 20.0], [50.0, 0.0]]]
} },
{ "type": "Feature","properties": {
"fill": "#ff00ff"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[70.0, 20.0], [-30.0, 0.0], [0.0, 50.0], [70.0, 20.0]]]
} }
]
}