为什么删除了 hover state 行为？

Question

I have a D3 generated map which needs to be able to dynamically change the fill element of drawn paths. The original paths are generated and assigned a class of 'boundaries'. The hover behaviour is set to turn the country yellow when the user hovers the cursor over the country. However, if I then go and dynamically change the fill color of the country, for example by using d3.selectAll- (I have simplified the below example so that this behaviour is simulated by uncommenting the last section), the hover behaviour stops working. The class has not changed, so why is the hover behaviour now not occurring.. and is there a workaround for this?

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

As @Michael mentioned it will be better to manually add or remove class using js.

D3 provides us mouseover and mouseout events which can be used to add and remove class.

Here on hover, we are applying the 'active' class on the element.

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)
   })

We also need to update the CSS according to these changes. You can update the CSS to:

.boundaries{
 fill:green;
}

.boundaries.active{
 fill:yellow;
}