d3.js使用回调函数设置类名失败

Question

我是D3.js的新手，并尝试使用函数设置类，但失败了。

我所做的就是使用这样的数据集绘制一些矩形：

[
{id: 0, status: "inital", color: "gray", x: 0, y: 0},
{id: 1, status: "success", color: "green", x: 100, y: 0}
...
] 

我的代码工作得很好，除了依赖id的set类。如果id是偶数，它将设置为“ first”，否则将设置为“ second”。

我什至能够console.log，但是在dom中，该类不存在。不知道为什么会这样（也许是异步问题？）。提前非常感谢您！

let rects = svg.selectAll("rect")
                    .data(stateData, function (d) { 
                        return d.id;
                    })

                rects.enter()
                  .append("rect")
                  .attr("id", function(d) {return "box-" + d.id;})
                  .attr('class', function (d) { 
                          //console.log (setClass(d.id)); it will show 
                          //correctlly
                          setClass(d.id); 
                   })
                  .attr("width", 50)
                  .attr("height", 50)
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("fill", 'blue')
function setClass (id) {
                if ( id % 2 == 0) {
                    return 'first';
                } else {
                    return 'second';
                }
              }