D3.js V4平行坐标brushY覆盖层宽度无法修改问题求助

我之前帮人排查过类似的迁移问题，D3从v3到v4的brush模块改动真的挺大的，尤其是平行坐标这种多轴场景，很容易踩这个坑。你遇到的覆盖层宽度固定1000、刷选时横跨整个SVG的问题，核心原因是v4的brush默认使用全局SVG范围，而没有限定到单个维度的局部区域——这和v3自动继承父元素坐标空间的逻辑完全不同。

问题根源 #

在D3 v3中，brush会自动适配父容器的坐标系统，绑定到每个维度的Y轴组上时，覆盖层只会在该组范围内显示。但v4重构了brush API，默认的extent是[[0, 0], [svgWidth, svgHeight]]，也就是整个SVG的大小，所以如果不手动指定局部范围，刷选覆盖层就会铺满整个画布。

解决方案：为每个brush指定局部extent #

你需要为每个维度的brush单独设置extent，把它限制在当前维度的X轴范围内。具体步骤如下：

1. 定义每个维度的宽度
   先确定平行坐标中单个维度的宽度（如果用了scaleBand布局，可以直接用x.bandwidth()；自定义布局就手动指定固定值）：

   // 假设x是你的维度横轴比例尺
   const axisWidth = x.bandwidth(); // 或者固定值如20，根据你的布局调整
   

2. 创建带局部范围的brushY
   针对每个维度的X位置，动态生成brush的范围：

   function createDimensionBrush(d) {
     return d3.brushY()
       // 关键：限定brush的范围在当前维度的X区间内，Y轴从0到画布高度
       .extent([[x(d), 0], [x(d) + axisWidth, height]])
       .on("brush", function() {
         // 获取当前刷选范围
         const selectedRange = d3.brushSelection(this);
         // 这里写你的刷选后逻辑，比如过滤数据、更新视图等
         if (selectedRange) {
           // 处理选中的Y轴范围
         } else {
           // 取消刷选后的逻辑
         }
       });
   }
   

3. 将brush绑定到每个维度组
   在渲染每个平行坐标维度的Y轴时，把brush添加到对应的独立分组中：

   // 假设dimensions是你的维度选择器（每个维度对应一个g元素）
   dimensions.each(function(d) {
     d3.select(this)
       .append("g")
       .attr("class", "brush")
       .call(createDimensionBrush(d)); // 传入当前维度的参数，生成对应范围的brush
   });
   

额外注意点 #

• 确保每个维度的brush都放在独立的<g>元素中，这样坐标系统是相对的，能进一步避免范围溢出。
• 如果你的维度布局用的是scalePoint，可以用x(d) - axisWidth/2和x(d) + axisWidth/2来设置extent，让brush居中于维度轴线。

这样调整后，每个维度的刷选覆盖层就只会限制在自身的宽度范围内，不会再横跨整个SVG了。

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