Почему поведение состояния при наведении снимается?

Question

У меня есть сгенерированная карта D3, которая должна иметь возможность динамически изменять элемент заливки нарисованных путей.Исходные пути генерируются и им присваивается класс «границ».Поведение при наведении указывается на то, чтобы сделать страну желтой, когда пользователь наводит курсор на страну.Однако, если я тогда пойду и динамически изменю цвет заливки страны, например, с помощью d3.selectAll- (я упростил приведенный ниже пример, чтобы это поведение имитировалось путем раскомментирования последнего раздела), поведение наведения перестает работать.Класс не изменился, так почему поведение при наведении теперь не происходит ... и есть ли обходной путь для этого?

CSS

.countryMap{
 width: 500px;
 height: 500px;
 position: relative;
}

.boundaries{
 fill:green;
}

.boundaries:hover{
 fill:yellow;
}

Javascript

const countryMap = {};
      const FILE = `aus.geojson`; // the file we will use
      var svg = d3
        .select('div.country__map')
        .append('svg')
        .attr('width',200)
        .attr('height',200)
        .attr('preserveAspectRatio', 'xMinYMin meet')
        .attr('viewBox','770 270 200 150')

        d3.json(FILE).then(function (outline) {
        countryMap.features = outline.features;

        // choose a projection
        const projection = d3.geoMercator();
        // create a path generator function initialized with the projection
        const geoPath = d3.geoPath().projection(projection);
        drawOutline();

        function drawOutline() {
          svg
            .selectAll('path.boundaries') // CSS styles defined above
            .data(countryMap.features)
            .enter()
            .append('path')
            .attr('class', 'boundaries')
            .attr('d', geoPath)
            // .style('fill', d => {
            //   return 'green';
            // })
        }
        })

Answer 1

Как отметил @Michael, будет лучше вручную добавить или удалить класс с помощью js.

D3 предоставляет нам события mouseover и mouseout, которые можно использовать для добавления и удаления класса.

Здесьпри наведении мы применяем к элементу «активный» класс.

svg
   .selectAll('path.boundaries')
   .data(countryMap.features)
   .enter()
   .append('path')
   .attr('class', 'boundaries')
   .attr('d', geoPath)
   .on('mouseover', function () {
      d3.select(this).classed("active", true)  
   })
   .on('mouseout', function () {
      d3.select(this).classed("active", false)
   })

Нам также необходимо обновить CSS в соответствии с этими изменениями.Вы можете обновить CSS до:

.boundaries{
 fill:green;
}

.boundaries.active{
 fill:yellow;
}