How can I highlight a part of a grouped chart when filter d3

I start with d3 using version 3.

I created a grouped bar chart that looks like this:

I added a drop-down list that contains all the genders (Woman (femme), Couple...).

I'm blocked because I can't highlight the bars that correspond to a certain gender when I choose from the drop-down list.

I found on the internet that I could use this code:

d3.select('#inds')
    .on("change", function () {
        var sect = document.getElementById("inds");
        var section = sect.options[sect.selectedIndex].value;

        //some code here
    });

the "Section" part contains my selected gender

I would like that when I select, for example torque, that the bars corresponding to the torque remain in color and the others are in gray.

This is the all code :

source : https://bl.ocks.org/hydrosquall/7966e9c8e8414ffcd8b5
Highlight : https://bl.ocks.org/bricedev/0d95074b6d83a77dc3ad
var margin = {top: 20, right: 20, bottom: 30, left: 40},
 width = 600,
 height = 250 ;


var x0 = d3.scale.ordinal()
 .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
 .range([height, 0]);

var color = d3.scale.ordinal()
 .range(["#54E868", "#54CCE8", "#6395FF", "#50FFC5"]);

var xAxis = d3.svg.axis()
 .scale(x0)
 .tickSize(0)
 .orient("bottom");

var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")

var svg = d3.select("body").append("svg")
 .attr("width", width + margin.left+ margin.right)
 .attr("height", height + margin.top + margin.bottom)
 .append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("../CSV/GenreOrigine.csv", function(error, data) {
 if (error) throw error;

 //Couples, Famille...
 var genreNames = d3.keys(data[0]).filter(function(key) { return key !== "Origine"; });

 data.forEach(function(d) {
     //Valeur pour chacune des origines par rapport au genre
     d.genres = genreNames.map(function(name) { return {name: name, value: +d[name]}; });

 });



 x0.domain(data.map(function(d) { return d.Origine; }));
 x1.domain(genreNames).rangeRoundBands([0, x0.rangeBand()]);
 y.domain([0, d3.max(data, function(d) { return d3.max(d.genres, function(d) { return d.value; }); })]);

 svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
     .call(xAxis);

 svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
     .append("text")
     .attr("transform", "rotate(-90)")
     .attr("y", 0.3)
     .attr("dy", ".71em")
     .style("text-anchor", "end")
     .text("Nombre de personnes");

 svg.select('.y').transition().duration(500).delay(1300).style('opacity','1');

 var Origine = svg.selectAll(".Origine")
     .data(data)
     .enter().append("g")
     .attr("class", "g")
     .attr("transform", function(d) { return "translate(" + x0(d.Origine) + ",0)"; });

 Origine.selectAll("rect")
     .data(function(d) { return d.genres; })
     .enter().append("rect")
     .attr("width", x1.rangeBand())
     .attr("x", function(d) { return x1(d.name); })
     .style("fill", function(d) { return color(d.name) })
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); })
     .on("mouseover", function(d) {
         d3.select(this).style("fill", d3.rgb(color(d.name)).darker(2));
     })
     .on("mouseout", function(d) {
         d3.select(this).style("fill", color(d.name));
     });

 Origine.selectAll("rect")
     .transition()
     .delay(function (d) {return Math.random()*1000;})
     .duration(1000)


 var legend = svg.selectAll(".legend")
     .data(genreNames.slice().reverse())
     .enter().append("g")
     .attr("class", "legend")
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

 legend.append("rect")
     .attr("x", width - 18)
     .attr("width", 18)
     .attr("height", 18)
     .style("fill", color);

 legend.append("text")
     .attr("x", width - 24)
     .attr("y", 9)
     .attr("dy", ".35em")
     .style("text-anchor", "end")
     .text(function(d) { return d; });

 d3.select('#inds')
     .on("change", function () {
         var sect = document.getElementById("inds");
         var section = sect.options[sect.selectedIndex].value;

         //some code here
     });

});

Solution

You can select all the rect in the SVG and filter them in the function, so the code would look like:

    var sect = document.getElementById('inds');
    var section = sect.options[sect.selectedIndex].value;

    if(section !== '') {
      d3.selectAll("rect")
        .attr('opacity', function(d) {
          if(d.name !== section) {
            return 0.2;
          } else {
            return 1;
          }              
        })
    } else {
      d3.selectAll('rect')
        .attr('opacity', 1)
    }

In the example above, I changed the opacity attribute, but you can change fill with the same approach.