D3 in react is creating multiple graphs of value update - d3.js

Question

I am trying to update the color of the graph, on updating, all the previous graphs are also visible
Here is my code:-
class BarChart extends Component {
state = {
color: "green",
};
componentDidUpdate = (prevProps, prevState) => {
if (prevState.color != this.props.color) {
this.drawChart();
}
};
drawChart() {
const data = [12, 5, 6, 6];
const svg = d3
.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 400)
svg
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 70)
.attr("y", (d, i) => 400 - 10 * d)
.attr("width", 65)
.attr("height", (d, i) => d * 10)
.attr("fill", this.props.color);
svg
.selectAll("text")
.data(data)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 70)
.attr("y", (d, i) => 400 - 10 * d - 3);
svg.data(data).exit().remove();
}
render() {
return <div>{this.drawChart}</div>
);
}
}
I've figured that I need to change the selectAll part, but don't know exactly how to change it?

Answer 1

You need to include an .exit declaration
svg
.selectAll("text")
.data(data)
.exit()
.remove()
svg
.selectAll("rect")
.data(data)
.exit()
.remove()
http://bl.ocks.org/alansmithy/e984477a741bc56db5a5
You may want to instead use a .selectAll("g") element/container to avoid having to maintain 'text' and 'rect' selections separately.