I'm trying without luck to fill a specific rect from many in D3 with function inside the style attribute, but it's just fills all the rects with #fff (white).

I want to fill a rect if the obj of that rect (from data) is inside monitor.details array.

  .style("fill", function (d) {
          let obj = monitor.details.filter(item => item.host == d.ip && item.port == d.port && item.status == 1);

          if(Object.values(obj).length > 0) return "#fff"
          else return "#888"
        })

code snipped from:

 svg
        .selectAll()
        .data(data, function (d, i) {
          return d.host + ":" + d.port;
        })
        .enter()
        .append("rect")
        .attr("x", function (d) {
          return x(d.host);
        })
        .attr("y", function (d) {
          return y(d.port);
        })
        .attr("width", x.bandwidth())
        .attr("height", y.bandwidth())
        .style("fill", function (d) {
          let obj = monitor.details.filter(item => item.host == d.ip && item.port == d.port && item.status == 1);

          if(Object.values(obj).length > 0) return "#fff"
          else return "#888"
        })

Even more interesting, I found in DOM the element of that rect and according to DOM the fill is the actual color I picked (in the picture below I choose the red color) but it's not reflect on the screen.