D3 re drawing adds elements again

Question

My html after the first time I called drawLegend looks like this:

<svg>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
<svg>

On window resize I call the function again, but now my html looks like this:

<svg>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
   <g class="legend">
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
       <rect class="active-dimension-rect"></rect>
       <text class="dimension-text">Some text</text>
   </g>
<svg>

How do I only append the rect and text elements on enter? At the moment the only way I get it to work, is to actually remove the elements (rect's and text's) from the dom when I resize.

 d3.select(window).on('resize', drawLegend);

function drawLegend() {
        var legendScale = d3.scale.ordinal()
                            .domain(dimensions)
                            .rangeRoundBands([0, legendWidth], .1);

        var legendGroups = legendSVG.selectAll(".legend").data(dimensions);

        legendGroups.enter().append("g")
                        .attr("class", "legend");

        legendGroups.attr("transform", function (d, i) {
                        return "translate(" + legendScale(d) + ",0)";
                    });


        legendGroups.exit().remove();

        var legendRects = legendGroups.append("rect")
                        .attr("width", 18)
                        .attr("height", 18)
                        .attr('class', 'active-dimension-rect')
                        .attr('id', function(d){
                            return 'dimension-rect-' + d.replace(/\s+/g, '');
                        })
                        .style({"fill": colourScale});

        var legendText = legendGroups.append("text")
                            .attr("dy", "1em")
                            .attr("dx", 20)
                            .attr('dimension', function(d) { return d })
                            .attr('class', 'dimension-text')
                            .attr('rectId', function(d) { return'dimension-rect-' + d.replace(/\s+/g, '') })
                            .style({"text-anchor": "start", 'font-size': '14px'})
                            .text(function(d) {
                                visibleDimensions.push(d);
                                return d;
                            });
}