title: Conditionally adding additional elements in D3
body: <p>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.</p>
  <p>Here is roughly what it looks like:</p>
  <pre><code>const dayRects = bounds.selectAll(&quot;rect&quot;).data(processed)
  
  dayRects
    .join(&quot;rect&quot;)
    .attr(&quot;x&quot;, d =&gt; xScale(d.exampleData))
    .attr(&quot;width&quot;, ordinalScale.bandwidth)
    .attr(&quot;y&quot;, d =&gt; yScale(d.exampleData))
    .attr(&quot;height&quot;, ordinalScale.bandwidth)
    .attr(&quot;rx&quot;, 3)
    .style(&quot;fill&quot;, d =&gt; colorScale(d.moreData))
  </code></pre>
  <p>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: <a href="https://i.stack.imgur.com/ny14h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ny14h.png" alt="enter image description here" /></a></p>
  <p>When I attempt to do this with something like below the above code</p>
  <pre><code>const dayStarted = bounds
     .select(&quot;rect&quot;)
     .data(processed.filter(i =&gt; i.value === desiredValue))
     .join(&quot;rect&quot;)
     .attr(&quot;x&quot;, d =&gt; xScale(d.exampleData))
     .attr(&quot;width&quot;, ordinalScale.bandwidth)
     .attr(&quot;y&quot;, d =&gt; yScale(d.exampleData))
     .attr(&quot;rx&quot;, 20)
  </code></pre>
  <p>... it just manipulates the first rect element in the first set of rects (dayRects).</p>