在 d3 中，當我按下按鈕更新條形圖中的數據時，文本不會更新

Question

我創建了一組用於更改條形圖的數據列表。 但是，因為它們不共享相同的 x 和 y 值。 它們在舊的頂部打印條形圖的新 x 值和 y 值。

這是問題的圖像，您可以看到 x 和 y 值打印在彼此之上：

我想知道如何解決這個問題，要么改變值，要么隱藏它們並打印新值。 無論你建議什么。

這是我的代碼

 <: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

您的更新代碼：

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

不刪除前一個軸<g>元素及其內容。

稱呼：

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

在添加一個新的之前：

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

axisBottom也是如此。