I am using d3.js to display over 10k grid, and each rect has own color. But there are several specific rect info which comes from backend API, I need to change those specific rects' color.

My code is:

const ref = useD3(
    (svg) => {

      const tooltip = d3.select(".tooltip");

      const mouseleave = function(d) {
        tooltip.style("opacity", 0);
        d3.select(this)
          .style("stroke", "#FFF")
          .style("stroke-opacity", 0.3)
          .style("stroke-width", 1)
          .style("opacity", "1");
      };
    
      svg.select(".main-area")
        .selectAll("rect")
        .data(data1, function(d) {return 'price: ' + d.price;})
        .enter()
        .append("rect")
          .attr("x", d => d.x)
          .attr("y", d => d.y)
          .attr("width", d => d.width )
          .attr("height", d=> d.height )
          .style("stroke-width", 1)
          .style("stroke", "#FFF")
          .style("stroke-opacity", 1)
          .style("opacity", 1)
          .style("cursor", "pointer")
        .on("mouseover", mouseover)
        .on("mouseleave", mouseleave)
        .on("mousemove", mousemove)
        .on("click", mouseclick);
    },

    [data1]
  );

As you can see above code, I appended 'rect' to ".main-area". After this, I want to change specific rects' color when event happens.

Here is what I've done.

// on event... // custom D3

var svg = d3.select('svg');
       svg.select(".main-area")
          .select("rect")
          .attr('x', decX)
          .attr('y', decY)
          .attr('fill', "#ef32d3"); 

But it doesn't work.