javascript - D3 中轴文本的背景颜色

Question

我想在 D3 中有条件地为 y 轴文本提供背景颜色，但遗憾的是“填充”属性不起作用，因为它为轴文本提供颜色而不是背景，如果我可以从 SO 那里得到解决方案。

这是它的样子。

这是有条件地编写的代码块。

.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

您应该在 fill 函数中定义第二个参数:

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

然后

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

    } ...

或者将d与文本值进行比较:

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

    }