score:0

I have found multiple errors in your code:

  1. New X Axis and Y Axis are created each time you draw another chart. The old ones should be removed before
  2. Merge does not work properly. Instead, I redraw rectangles for each group.

See the fixed chart in the snippet:

const margin = { top: 20, right: 20, bottom: 60, left: 40 };
const width = 1060 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
    
const x0 = d3.scaleBand()
  .rangeRound([0, width])
  .padding(0.2)
    
    
const x1 = d3.scaleBand();
    
const y = d3.scaleLinear()
    .range([height, 0]);
    
const color = d3.scaleOrdinal()
  .range(["#4472c4", "#ed7d31", "#a5a5a5", "#ffc000", "#a05d56", "#d0743c", "#ff8c00"]);
    
const xAxis = d3.axisBottom(x0);
    
const yAxis = d3.axisLeft(y)
    .tickFormat(d3.format(".2s"));
    
const svg = d3.select("#ChartInfo")
    .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 + ")");
    
function draw(data) {
    const keys = Object.keys(data[0]).slice(1);
    
    x0.domain(data.map(function (d) { return d.Date; }));
  x1.domain(keys).rangeRound([0, x0.bandwidth()]);
  y.domain([0, d3.max(data, function (d) { 
    return d3.max(keys, function (key) { 
        return d[key]; 
    }); 
  })])
  .nice();
  
  svg.selectAll(".x_axis,.y_axis").remove();
  svg.append("g")
    .attr("class", "x_axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
    .selectAll("text")
    .style("text-anchor", "start")
    .attr("transform", "rotate(45)");
    
    svg.append("g")
        .attr("class", "y_axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Population");
    
  const state = svg.selectAll(".state")
    .data(data, d => d.Date);
                
  const newState = state.enter()
    .append("g")
    .attr("class", "state");
              
  newState.merge(state)  
    .attr("transform", function (d) { return "translate(" + x0(d.Date) + ",0)"; })
    .each(function(d) {
        const g = d3.select(this);
      g.selectAll('rect').remove();
            Object.keys(d)
        .filter(key => key !== 'Date')
        .forEach(key => {
            g.append("rect")
            .attr("width", x1.bandwidth())
            .attr("x", x1(key))
            .attr("y", y(d[key]))
            .attr("height", height - y(d[key]))
            .style("fill", color(key))
          });
    });
            
    state.exit().remove();    
     
            var legend = svg.selectAll(".legend")
                .data(keys)
                .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
    
            legend.append("rect")
                .attr("x", width - 18)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", color);
    
            legend.append("text")
                .attr("x", width - 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function (d) { return d; });
        
};
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
    </head>
<body>
    <script src="https://d3js.org/d3.v6.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
    
    <div class="row">
        <div class="col-xl-2">
            <div class="container-fluid p-3 my-3">
                <h1>Select Queue</h1>
                <button onclick="ChartOne()" id="myButton">ChartOne</button>
                <button onclick="ChartTwo()" id="myButtonTwo">ChartTwo</button>
            </div>
        </div>
        <div class="col">
            <div class="container-fluid p-3 my-3">
                <h1>Charts</h1>
                <p>Page to test charts.</p>
    
                <h2>Chart</h2>
                <div id="ChartInfo">
                </div>
            </div>
        </div>
    </div>
    
    
    
    
    <script type="text/javascript">
        function ChartOne() {
            testAjax(function (output) {
            });
        }
    </script>
    <script type="text/javascript">
        function testAjax() {
            var A = [{"Date":"2021-02-01","CallTypeOne":116,"CallTypeTwo":114,"CallTypeThree":2,"CallTypeFour":0},{"Date":"2021-02-02","CallTypeOne":43,"CallTypeTwo":40,"CallTypeThree":1,"CallTypeFour":2},{"Date":"2021-02-03","CallTypeOne":270,"CallTypeTwo":221,"CallTypeThree":26,"CallTypeFour":23}];
            draw(A);
    
        }
    </script>
    
    
    <script type="text/javascript">
        function ChartTwo() {
            testTwoAjax(function (output) {
            });
        }
    </script>
    <script type="text/javascript">
        function testTwoAjax() {
            var A =[{"Date":"2021-02-01","CallTypeOne":69,"CallTypeTwo":67,"CallTypeThree":2,"CallTypeFour":0},{"Date":"2021-02-02","CallTypeOne":69,"CallTypeTwo":69,"CallTypeThree":0,"CallTypeFour":0}];
            draw(A);
    
        }
    </script>
    
    
</body>
</html>


Related Query