JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

JavaScript

d3.select("svg").append("g").attr("class", "svg-content");

function update(data) {
group = d3.select('.svg-content')
    .selectAll('g.group-content')
    .data(data, function (item) { return item; });

groupEnter = group.enter()
    .append('svg:g')
    .attr('class','group-content');

// enter
groupEnter
    .append('svg:g') // NEW
    .attr('class','rect-content') // NEW
    .append('svg:rect')
    .style('fill', '#000')
    .attr('x', function (item) { return item * 20; })
    .attr('y', function (item) { return item * 20; })
    .attr('width', 20)
    .attr('height', 20);

// update
group
    .select('.rect-content') // NEW
    .select('rect') 
    .attr('x', function (item) { return item * 20 })
    .attr('width', 20);

// remove
group.exit().remove();
}

update([1,2,3]);
setTimeout(function() { update([2,3,4]); }, 2000);