求助：如何在D3.js v5中禁用Brush的调整大小行为？

我明白你想用D3的Brush做个类似原生<input type="range">的滑块，结果卡在了禁用调整大小这一步——确实，默认Brush的左右手柄会允许拖拽调整选区宽度，这和我们要的单滑块逻辑完全不符。结合你的代码进度，给你几个实用的解决办法：

先贴出你目前的代码方便参考：

var width = 640, height = 480, margin = { right: 30, left: 30 }
var svg = d3.select('body')
 .append('svg')
 .attr('width', width)
 .attr('height', height)
var xScale = d3.scaleLinear()
 .domain([0, 180])
 .range([0, width])
 .clamp(true)
// 推测你后续还有Brush初始化代码，比如：
// var brush = d3.brushX().extent(...).on('brush', ...)
// svg.append('g').call(brush)

方法1：直接移除调整手柄 #

Brush默认会生成两个调整手柄，类名分别是.brush-handle--w（左侧）和.brush-handle--e（右侧）。在Brush挂载到SVG之后，直接移除这两个元素即可：

// 初始化并挂载Brush之后执行
svg.selectAll('.brush-handle--w, .brush-handle--e').remove();

这样用户就看不到也拖不动调整手柄了，只能整体拖动Brush选区，完美实现滑块的效果。

方法2：通过API隐藏手柄 #

在创建Brush的时候，调用handleSize(0)可以直接让调整手柄的尺寸变为0，相当于从根源上隐藏它们：

var brush = d3.brushX()
  .extent([[margin.left, height/2 - 10], [width - margin.right, height/2 + 10]]) // 定义Brush的可视范围
  .handleSize(0) // 关键：把手柄大小设为0
  .on('brush', function(event) {
    if (event.selection) {
      // 禁用调整后，选区的start和end值一致，取其中一个即可
      var sliderValue = xScale.invert(event.selection[0]);
      // 这里可以更新你的UI或业务逻辑，比如显示当前滑块值
      console.log('当前滑块值：', sliderValue);
    }
  });

// 挂载Brush到SVG
svg.append('g')
  .attr('class', 'brush')
  .call(brush);

这种方法更符合D3的API规范，不需要手动操作DOM元素，代码更整洁。

方法3：用CSS禁用手柄交互 #

如果不想修改JS代码，也可以通过CSS让手柄无法响应鼠标事件：

.brush-handle--w, .brush-handle--e {
  pointer-events: none;
  visibility: hidden; /* 可选：隐藏视觉上的手柄 */
}

这个方法适合快速测试，或者需要保留DOM元素但禁用交互的场景。

另外提醒下，如果你用的是D3 v5及更早版本，事件获取的方式是d3.event而不是回调参数，记得对应调整代码哦。

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