D3 bar chart update - d3.js

Question

I'm learning D3 and having an issue updating my bar chart
let container = d3.select(this)
let x = d3.scaleBand().rangeRound([0, width]).padding(0.1)
let y = d3.scaleLinear().rangeRound([height, 0])
x.domain(data.map(function(d) {
return d.x;
}));
y.domain([0, d3.max(data, function(d) { return d.y; })])
// seems like everytime when there is a new data, a new "g" is appended
let g = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
const gEnter = g.selectAll('.bar')
.data(data)
gEnter.exit().remove()
gEnter.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.x)
})
.attr("y", function(d) {
return y(d.y)
})
.attr('fill', barColor)
.attr("width", x.bandwidth())
.attr("height", function(d) {
return height - y(d.y)
})
My goal is to update the graph everytime when there is new data come in, what the above code does is keep appending new graph on top of the current graph.
Somehow I felt I'm missing something trivial.
Any tips will help, thanks.

Answer 1

You should move
let g = container
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
out of you update function, otherwise, it will create a new g each time this function is executed, make a selectAll on this new g (and find nothing inside it), and execute the enter() selection for all your data.
You can change your structure, for instance, to:
const svg = d3.select(this),
container = svg.append('g')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
let x = d3.scaleBand().rangeRound([0, width]).padding(0.1)
let y = d3.scaleLinear().rangeRound([height, 0])
function update(data){
x.domain(data.map(function(d) {
return d.x;
}));
y.domain([0, d3.max(data, function(d) { return d.y; })])
const gEnter = container.selectAll('.bar')
.data(data)
gEnter.exit().remove()
gEnter.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.x)
})
.attr("y", function(d) {
return y(d.y)
})
.attr('fill', barColor)
.attr("width", x.bandwidth())
.attr("height", function(d) {
return height - y(d.y)
})
}
someAjaxCall().then(data => update(data))
You can check this example made by Mike Bostock to have an overview on how organize your code.