如何让interact Slider控制条形图中的x轴，以便在每次更改时显示一部分数据

// 初始化条形图
var data = [/* your data */];
var svg = d3.select("svg");
var xScale = d3.scaleBand().domain(data.map(d => d.x)).range([0, width]);
var yScale = d3.scaleLinear().domain([0, d3.max(data, d => d.y)]).range([height, 0]);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", d => xScale(d.x))
  .attr("y", d => yScale(d.y))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d.y));

// 创建Slider控件
var slider = interact("#slider")
  .on("change", function(event) {
    var range = event.target.value; // 获取Slider的当前值
    var filteredData = data.filter(d => d.x >= range[0] && d.x <= range[1]); // 过滤数据

    // 更新条形图
    xScale.domain(filteredData.map(d => d.x));
    svg.selectAll("rect")
      .data(filteredData)
      .attr("x", d => xScale(d.x))
      .attr("y", d => yScale(d.y))
      .attr("width", xScale.bandwidth())
      .attr("height", d => height - yScale(d.y));
  });

// 设置Slider的范围和初始值
slider.min = d3.min(data, d => d.x);
slider.max = d3.max(data, d => d.x);
slider.value = [slider.min, slider.max];