D3js v5 嘗試使用畫筆在條形圖中選擇多個條形並將值保存到變量和表格

Question

我有一個條形圖代碼，其中用戶可以從條形圖中選擇條形以填充列表。 由於許多數據的值接近於 0，因此用戶很難點擊這些條形圖。 為了規避這個問題，我制作了包含數據的不可見條，這些條具有整個圖表區域的高度。 通過使用鼠標懸停並單擊這些不可見條，我可以讓用戶突出顯示這些條並選擇它們以填充表格列表。 這些值也被保存到一個對象中以供以后進一步處理。 我也能夠添加縮放功能。

現在的問題是：我希望用戶能夠選擇多個這些不可見條並將多個值傳遞給對象。 我嘗試使用 d3js v4-v5 的 BrushX 功能讓用戶能夠突出顯示感興趣的區域以供選擇（ 遵循此 v3 代碼）。 但是，我無法弄清楚如何從所選區域獲取值。 目前它正在返回空數組。 這是畫筆的一些代碼

var brush = d3.brushX();
svg.append("g")
    .attr("class","x brush")
    .call(brush)
    .selectAll("rect")
    .style({
        "fill": "#69f",
        "fill-opacity": "0.3"
    });
brush.on('brush', function(d){  
    k = brush.extent();
    j = data.filter(function(d){
        return k[0] <= d.Name && k[1] >=d.Name;
    });
    console.log(j);
});

更新：因為 plnkr 表現得很奇怪，我用相同的代碼創建了一個塊： https : //bl.ocks.org/Coola85/f20f66ee905d13880fc464d75b571603/

這里是普拉克與那些喜歡誰的代碼plnkr.co

您必須單擊添加圖表才能查看圖表。

如果您需要更多信息，請告訴我。 由於我是 D3js 和 SO 的新手，我想為幼稚道歉。

Answer 1

不帶參數的brush.extent()現在返回計算范圍的函數，而不是畫筆的位置。 使用d3.event.selection代替。

選定范圍后，將其與x比例進行比較：

brush.on('end', function(){
    var k = d3.event.selection; // extent of the brush, [x0, x1] since it's an x-brush

    var j = data.filter(function(d) {
        var x0 = x(d.ID), //  start of the corresponding band 
            x1 = x0 + x.bandwidth(); // end of the corresponding band 

        // check if the start of the brush is before the band 
        // and if the end of the brush is after the end of the band
        return k[0] <= x0 && k[1] >= x1;
    });

    console.log(j);
});