如何在D3 v4中实现直方图与散点图矩阵的交叉筛选？

最近我在D3里做了一套双视图联动的可视化方案：用散点图矩阵和直方图展示数据，两个视图都从同一个CSV文件读取数据源。重点是给直方图的X轴做了刷选交互功能，刷选后能联动更新散点图矩阵的内容，核心代码和实现思路如下：

核心刷选功能代码 #

这是我实现直方图X轴刷选的关键代码片段：

svg.append("g")
  .attr("class", "brush")
  .call(d3.brushX()
    .on("end", brushed));

function brushed() {
  // 忽略非用户触发的程序化事件
  if (!d3.event.sourceEvent) return;
  // 如果没有选中任何区域，直接退出
  if (!d3.event.selection) return;
  
  // 把刷选的屏幕坐标转换为数据域的数值
  var d0 = d3.event.selection.map(x.invert),
      // 对区间边界做精度处理，让筛选范围更规整
      d1 = [Math.floor(d0[0]*10)/10, Math.ceil(d0[1]*10)/10];
  
  // 这里可以添加联动逻辑：
  // 1. 根据d1的数值区间筛选CSV中的原始数据
  // 2. 调用散点图矩阵的更新函数，渲染筛选后的结果
}

实现要点说明 #

• 用d3.brushX()专门实现X轴方向的刷选，绑定在一个class为brush的g元素上
• brushed回调里的核心是把屏幕坐标转成实际数据值，这里用了x.invert()（x是直方图的X轴比例尺）
• 对转换后的数值做取整和精度处理，是为了避免出现过于细碎的边界值，让筛选逻辑更清晰

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