[Solved]-D3 Typescript SVG append not working-d3.js

You are not binding the new data to your rect in updateData

https://bost.ocks.org/mike/selection/#data

Perhaps surprisingly, data is not a property of the selection, but a property of its elements. This means that when you bind data to a selection, the data is stored in the DOM rather than in the selection: data is assigned to the data property of each element. If an element lacks this property, the associated datum is undefined. Data is therefore persistent while selections can be considered transient: you can reselect elements from the DOM and they will retain whatever data was previously bound to them.

The correct method is :

var updateData = function (newData: any) {
            svg.selectAll("rect").data(newData).transition().duration(2000)
                .attr("height", function (d: any) { return d * 5; })
                .attr("data-currentVal", function (d: any) { return d })
                .style("fill", function (d) {
                    if (d3.select(this).attr("data-currentVal") != d) {
                        return "red";
                    }
                    else { return "black"; }
                });
            console.log("updateData" + 1);
        }