I dont knoe exactly what is going on here tried everything to no success, here is my code, i am trying to add color by changing the opacity with the rgba, but i noticed only the first element of the selected(this) is being given the rgba and the rest turns to rgb, please note am talking about the line of that has the style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`)

        currentEl.filter(function(d, i, n):any {
            if(bottonValue==='filter-odd') {
                if(i % 2 === 0) {
                    select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`)
                }
                else {
                    select(this).style('fill','rgba(248, 248, 248, 0.5)')
                }
            }
            else if(bottonValue==='filter-even') {
                if(i % 2 !== 0) {
                    select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`,)
                }
                else {
                    select(this).style('fill','rgba(248, 248, 248, 0.5)')
                }
            }
            else
                select(this).style('fill',`rgba(${red}, ${green}, ${blue}, ${i+1 * 0.25}`)
           
        }) 
    }```

below is my code 


[![dom and result image][1]][1]


  [1]: https://i.stack.imgur.com/BhhtW.jpg