Estoy usando d3.js para mostrar una cuadrícula de más de 10k, y cada rect tiene su propio color. Pero hay varios rect info específicos que provienen de la API de back-end, necesito cambiar el color de esos rect específicos.

mi código es:

 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 => dx) .attr("y", d => dy) .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] );

Como puede ver el código anterior, agregué 'rect' a ".main-area". Después de esto, quiero cambiar el color de los rectos específicos cuando ocurra un evento.

Esto es lo que he hecho.

// en evento... // personalizado D3

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

Pero no funciona.