Background color to axis text in D3

Question

I want to provide background color to y-axis text conditionally in D3, but sadly "fill" attr is not working as it is providing the color to the axis text and not the background to it, It would be a great if i could get a solution to this from SO.

Here is how it look's.

Here is the chunk of code written conditionally.

.js

vis.selectAll(".yaxis text")  // select all the text elements for the xaxis
          .style("font-size", "15px")
          .style("font-weight", "bold")
        //   .style("fill","green")
          .style("fill", function(d,i) {
            var str;

            console.log(d);
            if (i == 1) {
            str = 'gray';

            }else if(i == 2){
                str = 'red';

            }else if(i == 3){
                str = 'Blue';

            }
            else if(i == 4){
                str = 'green';

            }

            return str;
            })

Answer 1

You should define second parameter in fill function:

.style("fill", function(d,i) {

and then

if (i == 1) {
      str = 'gray';

    } ...

or compare d with text value:

if (d == 'Positive') {
      str = 'green';

    }