D3 transition() - bars transitioning from top left corner instead of their x axis position

[steven_yna]

I am using D3 to buld a bar chart (‘rect’) and update the chart based on data.
so far so good the chart updates when data changes. However, I am having issues with the transition() method. When I add the transition() and duration() the bars do not transitions/update from their current (x) position but appear from the left top corner for the window (browser) and moves to its default x position on the axis.
Any idea why?

this is my code:

    plot.exit().remove();

    const plotEnter = plot
        .enter().append("g")
 
    plotEnter.append("rect").attr('class', 'bar')
    .on("mouseover", function(m, d) {        
        d3.select(this).style("fill", "orange")
        return tooltip.style("visibility", "visible")
            .style("left", m.clientX + "px")             
            .style("top", m.clientY + "px")
            .style("opacity", ".9")
            .html(toolTipHtml(d));
        })
        .on("mouseout", function(){
            d3.select(this).style("fill", "steelblue")
            return tooltip.style("visibility", "hidden");
        })
        .on("click", (m, d) => {
            window.open(`http://${d.ipV4}`);
        })

    plot = plot.merge(plotEnter)
    svg.selectAll("rect")
        // .transition()   works as expected without these, but when added, bars transition from top left corner!
        // .duration(500)
        .attr("x", function(d) { return x(d.roomName); })
        .attr("y", function(d) { return y(extractSum(source, d)); })
        .attr("height", function(d) { return height - y(extractSum(source, d)); })
        .style("fill", "steelblue")        
        .attr("width", x.bandwidth() - 4)
        .attr("transform", "translate(50,0)")
        
    plot.attr("y", function(d) { return y(extractSum(source, d)); })
        .attr("height", function(d) { return height - y(extractSum(source, d)); })