DC条形图如何使用鼠标划定x轴范围

Question

我正在尝试使用鼠标来划定x轴范围，如所示图像：

但是我不知道如何使它工作。

我正在使用d3.js v5.7.0和dc.js v3.0.7

我的代码是：

    var barChart = dc.barChart("#barChartbar1");
var dimensionbar1 = ndx.dimension(function(d) { return d.airline; });
var groupbar1 = dimensionbar1.group().reduceCount();
var yMax = groupbar1.size();

var keys = groupbar1.all().filter(function(d) {return d.key});
var xRange =[]
for (var i = 0; i < keys.length;i++) {
    xRange.push(keys[i].key);
}

barChart
.width(450).height(400)
.margins({top: 60, right: 60, bottom: 60, left: 60})
.x(d3.scaleOrdinal().domain(xRange))
.y(d3.scaleLinear().domain([0,500]).range([400,0]))
.xUnits(dc.units.ordinal)
.barPadding(.2)
.brushOn(true)
.elasticX(true)
.elasticY(true)
.xAxisLabel("Airline")
.yAxisLabel("FP")
.renderHorizontalGridLines(true)
.dimension(dimensionbar1)
.group(groupbar1)
.renderLabel(true)
.controlsUseVisibility(true)
.centerBar(true)
.on("pretransition", function(chart) {chart.selectAll("rect.bar").on("click",function(d) {chart.filter(null).filter(d.data.key).redrawGroup();})})
.renderlet(function (chart) {chart.selectAll('g.x text').attr('transform','translate(-20,15) rotate(315)')});

预先感谢