Question

[here after filtered](https://i.stack.imgur.com/rY3fF.png)
[and the default when reload chart](https://i.stack.imgur.com/eGR1O.png)
[the html code](https://i.stack.imgur.com/sFBP2.png)
[function brush values of columns](https://i.stack.imgur.com/EViyp.png)
and updatebarChart.js function 
    function updateBarChart(datasetBarChart, selectListBar, type) {
  barChart = d3.select("#barChart");

  (width = +barChart.attr("width")),
    (height = +barChart.attr("height") - 300);

  defaultBarChart = filterBarData(datasetBarChart, selectListBar, type)[0];
  absMaxValue = filterBarData(datasetBarChart, selectListBar, type)[1];

  var stack = d3
    .stack()
    .keys(["D01_ZF_MONTH_TB_MOINS_GL_USD", "D01_ZF_MONTH_ABS_TB_GL_USD"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetDiverging);

  var stackedData = stack(defaultBarChart);

  maxD01_ZF_MONTH_TB_MOINS_GL_USD = d3.max(stackedData, (d) =>
    d3.max(d, (d) => Math.abs(d[0]))
  );
  maxD01_ZF_MONTH_ABS_TB_GL_USD = d3.max(stackedData, (d) =>
    d3.max(d, (d) => Math.abs(d[1]))
  );
  maxValue = Math.max(
    maxD01_ZF_MONTH_TB_MOINS_GL_USD,
    maxD01_ZF_MONTH_ABS_TB_GL_USD
  );


  xScaleBand = d3
    .scaleBand()
    .domain(defaultBarChart.map((d) => d.D01_BSEG_HKONT))
    .range([0, width])
    .padding(0.2);

  yScale = d3.scaleLinear().domain([-maxValue, maxValue]).range([height, 0]);
  const bar = d3.select("#barChart").select("svg").datum(stackedData);

  bar
    .select("#x-axis")
    .transition()
    .duration(1000)
    .call(d3.axisBottom(xScaleBand))
    .selectAll("text")
    .attr("font-weight", "normal")
    .style("text-anchor", "start")
    .attr("dx", ".6em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(30)")
    .style("font-size", "15px")
    .style("font-weight", "bold");

  d3.select("#yaxis-2")
    .transition()
    .duration(1000)
    .call(d3.axisLeft(yScale).ticks(null, "s"))
    .selectAll("text")
    .style("font-size", "13px")
    .attr("fill", "#000")
    .style("font-weight", "bold");

  const colorScale = d3
    .scaleOrdinal()
    .domain(["D01_ZF_MONTH_TB_MOINS_GL_USD", "D01_ZF_MONTH_ABS_TB_GL_USD"])
    .range(["steelblue", "brown"]);

  var D01_ZF_MONTH_TB_MOINS_GL_USD = [];
  var D01_ZF_MONTH_ABS_TB_GL_USD = [];

  for (a in stackedData[0]) {
    if (!isNaN(parseInt(a))) {
      D01_ZF_MONTH_TB_MOINS_GL_USD.push(stackedData[0][a]);
    }
  }

  for (a in stackedData[1]) {
    if (!isNaN(parseInt(a))) {
      D01_ZF_MONTH_ABS_TB_GL_USD.push(stackedData[1][a]);
    }
  }

  var g1 = d3
    .select("#D01_ZF_MONTH_TB_MOINS_GL_USD")
    .selectAll("rect")
    .data(D01_ZF_MONTH_TB_MOINS_GL_USD);

  g1.enter().append("svg:rect");
  g1.exit().remove();

  var g2 = d3
    .select("#D01_ZF_MONTH_ABS_TB_GL_USD")
    .selectAll("rect")
    .data(D01_ZF_MONTH_ABS_TB_GL_USD);

  g2.enter().append("svg:rect");
  g2.exit().remove();

  d3.select("#bar")
    .transition()
    .duration(1000)
    .selectAll("g")
    .selectAll("rect")
    .attr("x", function (d) {
      if (d.data.D01_BSEG_HKONT !== undefined) {
        return xScaleBand(d.data.D01_BSEG_HKONT);
      }
    })
    .attr("width", xScaleBand.bandwidth())
    .attr("y", function (d) {
      return yScale(Math.max(d[1], d[0]));
    })
    .attr("height", function (d) {
      if (d.data.D01_BSEG_HKONT !== undefined) {
        return Math.abs(yScale(d[0]) - yScale(d[1]));
      }
    });
  console.log(xScaleBand.bandwidth());

  d3.select("#bar")
    .selectAll("rect")
    .on("mouseover", function (d) {
      if (d) {
        tooltip.html(
          "<span style= font-weight: bold; color: white >" +
          d.data.D01_BSEG_HKONT +
          "</span><br>" +
          "<span style= font-size: 12px; color: white >Absolute difference in net: </span>" +
          "<span style= font-weight: bold; font-size: 16px; color: #E03939 >" +
          formatResult(d.data.D01_ZF_MONTH_ABS_TB_GL_USD) +
          "</span>" +
          "<br>" +
          "<span style= font-size: 12px; color: white >Difference in net: </span>" +
          "<span style= font-weight: bold; font-size: 16px; color: #57A2E0 >" +
          formatResult(d.data.D01_ZF_MONTH_TB_MOINS_GL_USD) +
          "</span>"
        );
        return tooltip.style("visibility", "visible");
      }
    })
    .on("mousemove", function () {
      Px = d3.select(this).attr("x");
      Py = d3.select(this).attr("y");
      return tooltip
        .style("top", event.pageY - 10 + "px")
        .style("left", event.pageX + 10 + "px")
        .style("border", "none")
        .style("background-color", "rgb(83, 83, 83)")
        .style("opacity", "0.9")
        .style("font-size", "15px");
    })
    .on("mouseout", function () {
      return tooltip.style("visibility", "hidden");
    });


  //     // Cập nhật giá trị của selectListBar trên phần tử HTML
  // const selectedValuesText = selectListBar.join( ,  );
  // document.getElementById( selectedValuesText ).textContent = selectedValuesText;

  function formatResult(value) {
    if (isNaN(value)) {
      return parseFloat(value).toFixed(2);
    } else if (Math.abs(value) < 1000) {
      return parseFloat(value).toFixed(2);
    } else if (Math.abs(value) < 1000000) {
      return (value / 1000).toFixed(2) + "K";
    } else if (Math.abs(value) < 1000000000) {
      return (value / 1000000).toFixed(2) + "M";
    } else if (Math.abs(value) < 1000000000000) {
      return (value / 1000000000).toFixed(2) + "G";
    }
    return parseFloat(value).toFixed(2);
  }

  console.log(xScaleBand.bandwidth());

  const tooltip = d3
    .select("#barChart")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .style("background-color", "white")
    .style("color", "black")
    .style("border", "1px solid black")
    .style("padding", "5px")
    .style("border-radius", "5px")
    .style("shape", "rectangle");

  var xScaleBandBrush = d3.scaleBand().range([0, width]);
  var yScaleBrush = d3.scaleLinear().range([185, 0]);

  xScaleBandBrush.domain(xScaleBand.domain());
  yScaleBrush.domain(yScale.domain());

  d3.select("#brushTool")
    .select("svg")
    .select("#x-axis2")
    .call(d3.axisBottom(xScaleBandBrush))
    .selectAll("text")
    .attr("font-weight", "normal")
    .style("text-anchor", "start")
    .attr("dx", ".6em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(30)");

  var g1 = d3
    .select("#D01_ZF_MONTH_TB_MOINS_GL_USDbrush")
    .selectAll("rect")
    .data(D01_ZF_MONTH_TB_MOINS_GL_USD);

  g1.enter().append("svg:rect");
  g1.exit().remove();

  var g2 = d3
    .select("#D01_ZF_MONTH_ABS_TB_GL_USDbrush")
    .selectAll("rect")
    .data(D01_ZF_MONTH_ABS_TB_GL_USD);

  g2.enter().append("svg:rect");
  g2.exit().remove();

  console.log(xScaleBand.bandwidth());


  return xScaleBand;
}
I don t know how to shrink the bar chart column after data brush, can someone give me the solution?

[have tried solution calculate width](https://i.stack.imgur.com/33zZv.png)

but when I get an error, if I hit on the first line chart, then hit again on the bar chart, the returned data doesn t match the previous hit period, for example when I brush on the line first and then brush next at the bar with 4 columns, only 1 column is displayed on the screen] or is there any other way to recalculate the size of the columns in the chart?

友情链接