D3.js v5：如何在可刷选柱状图中用filter()获取选区内数据

问题原因及修复方案 #

• this指向错误：filter回调用普通函数时，this不再指向当前实例，导致this.xScale无法正确获取。改用箭头函数就能保留外层this的指向。
• 过滤逻辑维度错误：kw0、kw1是通过xScale.invert得到的原始数据域的值，你之前把数据传入xScale转成像素值后再和原始数据值比较，属于跨维度对比，自然匹配不到数据。应该直接拿数据的x字段和kw0、kw1比较。
• 控制台打印错误：你打印的dataselected未加this，应该调用this.dataselected才能访问实例属性。

修正后的代码 #

brushed(selection){
  if (selection) {
    console.log(this.data); // Not empty
    let kw0 = this.xScale.invert(selection[0]);
    let kw1 = this.xScale.invert(selection[1]);
    this.xScale2 = d3.scaleLinear()
            .domain([kw0, kw1])
            .range([0, vis.width - vis.margin.right]);
    // 改用箭头函数保留this指向，直接对比原始数据值
    this.dataselected = this.data.filter(d => {
      return kw0 <= d.x && d.x <= kw1; // 替换成你数据里实际的x字段名
    });
    console.log(this.dataselected); // 现在可获取正确过滤数据
  }
}

注意：代码里的d.x要替换成你数据集里实际存储x轴数据的字段名，比如d.timestamp、d.category等。

内容的提问来源于stack exchange，提问作者wastecvd