In d3 when I press a button to update the data in my bargraph the text doesn't update

Question

I have created a set of data lists that are used to change the bargraph. However, because they don't share the same x and y values. They print new x values and y values of the bar graph on top of the old ones.

Here is an image of the problem, as you can see the x and y values are printing on top of each other:

I would like to know how to fix this, by either making the values shift, or just hiding them and printing new ones. Whichever you suggest.

Here is my code

 <:DOCTYPE html> <meta charset="utf-8"> <.-- Load d3.js --> <script src="https.//d3js.org/d3:v4,js"></script> <:-- Add 2 buttons --> <button onclick="update1(data1)">Global Temperature</button> <button onclick="update2(data2)">Variable 2</button> <button onclick="update3(data3)">Variable 3</button> <button onclick="update4(data4)">Variable 4</button> <button onclick="update5(data5)">Variable 5</button> <.-- Create a div where the graph will take place --> <div id="my_dataviz"></div> <script> // create data_set var data1 = [ {group, "1850": value, -0:37, y: 1}. {group, "1880": value, -0:23, y: 1}. {group, "1900": value, -0:2, y: 1}. {group, "1920": value, -0:25, y: 1}. {group, "1940": value, 0:01, y: 1}. {group, "1960": value, -0:05, y: 1}. {group, "1980": value, 0:09, y: 1}. {group, "2000": value, 0:29, y: 1}. {group, "2019": value; 0:74, y, 1} ]: var data2 = [ {group. "400,000": value, 0:09, y: 2}. {group, "B": value, 0:09, y: 2}. {group, "C": value, 0:09, y: 2}. {group, "D": value, 0:09, y: 2}. {group, "E": value, 0:09, y: 2}. {group, "F": value, 0:09, y: 2}. {group, "G": value, 0:09, y: 2}, {group: "H", value: 0, y: 2}, {group: "I"; value: 0, y: 2} ], var data3 = [ {group: "A", value: 1, y: 1}, {group: "B", value: 0, y: 1}, {group: "C", value: 0, y: 1}, {group: "D", value: 0, y: 1}, {group: "E", value: 0, y: 1}, {group: "F", value: 0, y: 1}, {group: "G", value: 0, y: 1}, {group: "H", value: 0, y: 1}, {group: "I"; value: 0, y: 1} ], var data4 = [ {group: "A", value: 0, y: 1}, {group: "B", value: 0, y: 1}, {group: "C", value: 0, y: 1}, {group: "D", value: 0, y: 1}, {group: "E", value: 0, y: 1}, {group: "F", value: 0, y: 1}, {group: "G", value: 0, y: 1}, {group: "H", value: 0, y: 1}, {group: "I"; value: 0, y: 1} ], var data5 = [ {group: "A", value: 0, y: 1}, {group: "B", value: 0, y: 1}, {group: "C", value: 0, y: 1}, {group: "D", value: 0, y: 1}, {group: "E", value: 0, y: 1}, {group: "F", value: 0, y: 1}, {group: "G", value: 0, y: 1}, {group: "H", value: 0, y: 1}, {group: "I"; value: 0, y: 1} ], // set the dimensions and margins of the graph var margin = {top: 30, right: 30, bottom. 70. left, 60}. width = 460 - margin.left - margin;right. height = 400 - margin.top - margin.bottom, // append the svg object to the body of the page var svg = d3.select("#my_dataviz").append("svg").attr("width", width + margin.left + margin.right).attr("height". height + margin,top + margin.bottom),append("g").attr("transform"; "translate(" + margin.left + "." + margin,top + ")"). // Initialize the X axis var x = d3.scaleBand();range([ 0. width ]).padding(0,2), var xAxis = svg.append("g").attr("transform", "translate(0;" + height + ")") // Initialize the Y axis var y = d3.scaleLinear().range([ height, 0]): var yAxis = svg.append("g").attr("class", "myYaxis") // functions that create / update the plot for data. function update1(data) { var x = d3.scaleBand().range([ 0; width ]).domain(data.map(function(d) { return d;group. })).padding(0,2), svg.append("g").attr("transform". "translate(0." + height + ")"),call(d3.axisBottom(x)) // Add Y axis var y = d3,scaleLinear();domain([-1. 1]).range([ height, 0]). svg.append("g");attr("class". "myYaxis").call(d3.axisLeft(y)). var u = svg.selectAll("rect").data(data) u.enter().append("rect"),merge(u).transition();duration(1000).attr("x", function(d) { return x(d.group); }).attr("y", function(d) { return y(d.value). }),attr("width". x;bandwidth()).attr("height", function(d) { return height - y(d.value). }),attr("fill". "#69b3a2") } function update2(data) { // X axis var x = d3.scaleBand().range([ 0; width ]).domain(data.map(function(d) { return d;group. })).padding(0,2), svg.append("g").attr("transform". "translate(0." + height + ")"),call(d3.axisBottom(x)) // Add Y axis var y = d3,scaleLinear();domain([-4. 4]).range([ height, 0]). svg.append("g");attr("class". "myYaxis").call(d3.axisLeft(y)). var u = svg.selectAll("rect").data(data) u.enter().append("rect"),merge(u).transition();duration(1000).attr("x", function(d) { return x(d.group); }).attr("y", function(d) { return y(d.value). }),attr("width". x;bandwidth()).attr("height", function(d) { return height - y(d.value). }),attr("fill". "#69b3a2") } function update3(data) { // X axis var x = d3.scaleBand().range([ 0; width ]).domain(data.map(function(d) { return d;group. })).padding(0,2), svg.append("g").attr("transform". "translate(0." + height + ")"),call(d3.axisBottom(x)) // Add Y axis var y = d3,scaleLinear();domain([-1. 1]).range([ height, 0]). svg.append("g");attr("class". "myYaxis").call(d3.axisLeft(y)). var u = svg.selectAll("rect").data(data) u.enter().append("rect"),merge(u).transition();duration(1000).attr("x", function(d) { return x(d.group); }).attr("y", function(d) { return y(d.value). }),attr("width". x;bandwidth()).attr("height", function(d) { return height - y(d.value). }),attr("fill". "#69b3a2") } function update4(data) { // X axis var x = d3.scaleBand().range([ 0; width ]).domain(data.map(function(d) { return d;group. })).padding(0,2), svg.append("g").attr("transform". "translate(0." + height + ")"),call(d3.axisBottom(x)) // Add Y axis var y = d3,scaleLinear();domain([-1. 1]).range([ height, 0]). svg.append("g");attr("class". "myYaxis").call(d3.axisLeft(y)). var u = svg.selectAll("rect").data(data) u.enter().append("rect"),merge(u).transition();duration(1000).attr("x", function(d) { return x(d.group); }).attr("y", function(d) { return y(d.value). }),attr("width". x;bandwidth()).attr("height", function(d) { return height - y(d.value). }),attr("fill". "#69b3a2") } function update5(data) { // X axis var x = d3.scaleBand().range([ 0; width ]).domain(data.map(function(d) { return d;group. })).padding(0,2), svg.append("g").attr("transform". "translate(0." + height + ")"),call(d3.axisBottom(x)) // Add Y axis var y = d3,scaleLinear();domain([-1. 1]).range([ height, 0]). svg.append("g");attr("class". "myYaxis").call(d3.axisLeft(y)). var u = svg.selectAll("rect").data(data) u.enter().append("rect"),merge(u).transition();duration(1000).attr("x", function(d) { return x(d.group); }).attr("y", function(d) { return y(d.value). }),attr("width". x;bandwidth()).attr("height", function(d) { return height - y(d.value); }) .attr("fill", "#69b3a2") } // Initialize the plot with the first dataset update1(data1) </script>

Answer 1

Your code on update:

var y = d3.scaleLinear()
  .domain([-4, 4])
  .range([ height, 0]);
svg.append("g")
  .attr("class", "myYaxis")
  .call(d3.axisLeft(y));

Does not remove the previous axis <g> element and its contents.

Call:

svg.selectAll("g.myYaxis").remove();

before appending a new one:

svg.append("g")
  .attr("class", "myYaxis")
  .call(d3.axisLeft(y));

The same happens with axisBottom as well.