title: In D3, how can I bind two rectangles to the same selection using different data?
body: <p>I am working with Bill White's Virtual Scrolling class as a basis for my code. It can be seen <a href="http://bl.ocks.org/billdwhite/36d15bc6126e6f6365d0" rel="nofollow">here.</a></p>
  
  <p>I have two sets of data - reference data that I have millions of rows of, and variant data that I only have 9 of. I want to display the variant data on the same row as the reference data when the variant data and the reference data appear at the same index.</p>
  
  <p>I have a rowEnter function</p>
  
  <pre><code>        var rowEnter = function(rowSelection) {
          rowSelection.append("rect")
              .attr("rx", 3)
              .attr("ry", 3)
              .attr("width", "125")
              .attr("height", "30")
              .attr("fill-opacity", 0.25)
              .attr("stroke", "#999999")
              .attr("stroke-width", "2px");
          rowSelection.append("text")
              .attr("transform", "translate(10,20)");
      };
  </code></pre>
  
  <p>And a rowUpdate function</p>
  
  <pre><code>    var rowUpdate = function(rowSelection)
      {
          rowSelection.selectAll("rect")
              .append("rect")
              .attr("fill", "#df4440");
              rowSelection.select("text")
                  .append("text")
                  .text(d.id + d.label);
      }
  </code></pre>
  
  <p>And it's all called here</p>
  
  <pre><code>        var virtualScroller = d3.VirtualScroller()
          .rowHeight(30)
          .enter(rowEnter)
          .update(rowUpdate)
          .exit(rowExit)
          .svg(scrollSVG)
          .totalRows(5090493)
          .viewport(d3.select(".viewport"));
  </code></pre>
  
  <p>I want to add something like the following...</p>
  
  <pre><code>        var rowEnterVariant = function(variantData) {
          rowSelection.append("rect")
              .attr("rx", 6)
              .attr("ry", 6)
              .attr("width", "125")
              .attr("height", "24")
              .attr("fill-opacity", 0.25)
              .attr("stroke", "#999999")
              .attr("stroke-width", "2px");
          rowSelection.append("text")
              .attr("transform", "translate(10,20)");
      };
  </code></pre>
  
  <p>And...</p>
  
  <pre><code>        var variantUpdate = function(rowSelection, variantData)
      {
          rowSelection.selectAll("rect")
              .append("rect")
              .attr("fill", function(d) {
                  if(d.id == variantData.items[i].position)
                  {
                      var red = "#df4440";
                      return red;
                  }
              });
              rowSelection.select("text")
                  .append("text")
                  .text(variantData.items[i].variation);
      }
  </code></pre>
  
  <p>Which would ideally add a rectangle next to the original reference rectangle, this time with my variant data inside of it, only being rendered when the variant data and the reference data coincide.</p>
  
  <p>I cannot figure out how to implement this. I believe the solution has something to do with nested selection (I could select my reference and variant data together, and apply data binding to each of them individually), but I cannot figure out how.</p>
  
  <p>Any help would be greatly appreciated.</p>