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

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

但我不知道如何让它工作

我正在使用d3.JSV5.7.0和dc.JSV3.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)')});

var barChart=dc.barChart（#barChartbar1”）；
var dimensionbar1=ndx.dimension（函数（d）{return d.airline；}）；
var groupbar1=dimensionbar1.group（）.reduceCount（）；
var yMax=groupbar1.size（）；
var keys=groupbar1.all（）.filter（函数（d）{return d.key}）；
var xRange=[]
对于（变量i=0；i

---

提前感谢

欢迎来到StackOverflow。你的问题不太符合StackOverflow期望的标准。您当前的问题可能不会被接受。我强烈建议您按照的指导原则编辑您的问题，您能更具体地说明哪些问题不起作用吗？您在屏幕截图中圈出了手柄，您的意思是刷牙可以，但这些手柄不显示吗？您使用的是dc.css吗？处理程序不显示，我无法进行过滤（类似于图中所示）。对不起，我不太清楚，但我知道如何解释。啊哈，我想这是允许你点击个别的酒吧，但不刷。这是具有顺序X刻度/单位的图表所支持的行为。目前；该问题描述了一个复杂的解决方法。如果可能的话，如果你想刷牙的话，最好使用定量的量表。谢谢你的帮助！