I've built out a heatmap with D3 in React and the basic result works fine: the rects are rendering and so are the conditional color values, based on my data.
Here is roughly what it looks like:
const dayRects = bounds.selectAll("rect").data(processed)
dayRects
.join("rect")
.attr("x", d => xScale(d.exampleData))
.attr("width", ordinalScale.bandwidth)
.attr("y", d => yScale(d.exampleData))
.attr("height", ordinalScale.bandwidth)
.attr("rx", 3)
.style("fill", d => colorScale(d.moreData))
What I'm struggling to do and cannot find guidance for online, is to conditionally add elements based on data. For example, I'm trying to add an additional rect for items in my array of data that meet certain conditions. This additional rect would be slightly larger than the above rects, have a transparent fill, and a different colored stroke - resulting in, for example, something like this: 
When I attempt to do this with something like below the above code
const dayStarted = bounds
.select("rect")
.data(processed.filter(i => i.value === desiredValue))
.join("rect")
.attr("x", d => xScale(d.exampleData))
.attr("width", ordinalScale.bandwidth)
.attr("y", d => yScale(d.exampleData))
.attr("rx", 20)
... it just manipulates the first rect element in the first set of rects (dayRects).
question from:
https://stackoverflow.com/questions/65621682/conditionally-adding-additional-elements-in-d3 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
