I am using D3 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.