Прежде всего, класс состояний state, а не states. Но этот вопрос - не просто вопрос опечатка , здесь есть большая проблема:
Вы устанавливаете заполнение состояний на none (используя их родительскую группу CSS). Вот почему твое зависание не имеет никакого эффекта. В SVG значением по умолчанию pointer-events является visiblePainted, , в котором :
Элемент может быть целью события указателя, только если установлено свойство видимостивидимым и, например, когда курсор мыши находится над внутренней частью (т. е. «заливка») элемента, а для свойства fill установлено значение , отличное от none . (выделение мое)
Поэтому вы должны установить для их pointer-events значение all.
Также, если вы хотите показать округа, измените порядок добавления.
Вот ваш код с этими изменениями:
async function drawMap() {
var svg = d3.select("body").append('svg')
.attr("height", 600)
.attr("width", 1000)
var map = await d3.json('https://d3js.org/us-10m.v1.json')
var path = d3.geoPath()
var mouseOver = function(d) {
d3.select(this)
}
var mouseOut = function(d) {}
svg.append("g")
.attr('id', 'counties')
.selectAll("path")
.data(topojson.feature(map, map.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("class", "county-border")
svg.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(map, map.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr('class', 'states')
svg.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(map, map.objects.states).features)
.enter().append("path")
.attr("d", path)
.attr("class", "state")
.attr("pointer-events", "all");
svg.append("g")
.attr("id", "counties")
.selectAll("path")
.data(topojson.feature(map, map.objects.counties).features)
.enter().append("path")
.attr("d", path)
.attr("class", "county-boundary")
.attr("pointer-events", "none")
}
drawMap()
#states {
fill: none;
stroke: green;
stroke-width: 1.9px;
}
#states .active {
display: none;
}
#state-borders {
fill: none;
}
#counties {
fill: none;
}
.county-boundary {
fill: none;
stroke: lightgrey;
stroke-width: 0.7px;
}
.state:hover {
fill: orange;
}
#sliderContainer {
text-align: center;
position: relative;
left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<title>County Map</title>
<body>
<div id="wrap"></div>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="map.js"></script>
</body>
</html>