Angular中D3图表未刷选区域的自定义颜色设置方法

你目前仅设置了Brush选框的橙色，要实现刷选/未刷选区域的颜色区分，分两种常见场景处理：

场景1：修改Brush组件自身视觉（选框+未选背景） #

D3的Brush组件默认只有透明的事件捕获层（.overlay）和蓝色半透明选框（.selection）。要给未刷选区域添加底色，需在Brush容器内先加一个覆盖整个图表的矩形作为未选背景，再让选框叠加在上方：

const brush = d3.brush()
  .extent([[0, 0], [width, height]])
  .on('start', brushstart)
  .on('end', brushed);

// 创建Brush容器，先添加未刷选背景矩形
const brushG = svg.append('g')
  .attr('class', 'brush');

// 未刷选区域的背景
brushG.append('rect')
  .attr('width', width)
  .attr('height', height)
  .attr('fill', '#e0e0e0') // 未刷选区域颜色，这里用浅灰色示例
  .attr('pointer-events', 'none'); // 不干扰Brush的事件捕获

// 调用Brush组件
brushG.call(brush);

function brushstart() {
  // 设置刷选框为橙色，可加透明度让背景透出
  const brushSelection = svg.select('.brush .selection');
  brushSelection.attr('fill', 'orange')
                .attr('fill-opacity', 0.7);
}

function brushed() {
  const selection = d3.brushSelection(brushG.node());
  // 取消刷选时确保背景矩形正常显示
  if (!selection) {
    brushG.select('rect').attr('display', null);
  }
}

场景2：修改图表元素的颜色（选中元素橙色，未选中另一种颜色） #

如果需求是让图表内的图形（如散点、柱状条）被刷选到的显示橙色，未选中的用其他颜色，需在brushed事件里判断元素是否在选框范围内，批量设置颜色：

假设你已通过const circles = svg.selectAll('circle').data(data).enter().append('circle')创建了绑定数据的散点元素，修改代码如下：

const brush = d3.brush()
  .extent([[0, 0], [width, height]])
  .on('end', brushed);

// 提前设置Brush选框为橙色
svg.append('g')
  .attr('class', 'brush')
  .call(brush)
  .select('.selection')
  .attr('fill', 'orange');

// 处理刷选逻辑，修改图表元素颜色
function brushed() {
  const selection = d3.brushSelection(this);
  
  // 无刷选时，所有元素恢复默认颜色
  if (!selection) {
    circles.attr('fill', '#666'); // 未刷选元素的默认颜色
    return;
  }

  // 提取选框的坐标范围
  const [xMin, yMin] = selection[0];
  const [xMax, yMax] = selection[1];

  // 判断每个元素是否在选框内，设置对应颜色
  circles.attr('fill', d => {
    // 若使用了比例尺（如xScale），需先将数据值转为画布坐标：xScale(d.x) >= xMin
    return (d.x >= xMin && d.x <= xMax && d.y >= yMin && d.y <= yMax) 
      ? 'orange' 
      : '#666'; // 未刷选元素的颜色
  });
}

注意点 #

• 若使用了比例尺（如xScale、yScale），判断元素是否在选框内时，要先将数据值转换为画布坐标再和选框坐标比较。
• Brush的selection元素默认带有fill-opacity，可根据需求调整透明度，让底层内容更清晰。

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