In D3, how can I bind two rectangles to the same selection using different data?

Question

I am working with Bill White's Virtual Scrolling class as a basis for my code. It can be seen here.

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.

I have a rowEnter function

        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)");
    };

And a rowUpdate function

    var rowUpdate = function(rowSelection)
    {
        rowSelection.selectAll("rect")
            .append("rect")
            .attr("fill", "#df4440");
            rowSelection.select("text")
                .append("text")
                .text(d.id + d.label);
    }

And it's all called here

        var virtualScroller = d3.VirtualScroller()
        .rowHeight(30)
        .enter(rowEnter)
        .update(rowUpdate)
        .exit(rowExit)
        .svg(scrollSVG)
        .totalRows(5090493)
        .viewport(d3.select(".viewport"));

I want to add something like the following...

        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)");
    };

And...

        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);
    }

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.

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.

Any help would be greatly appreciated.