D3.js技术咨询：如何使用不同变量调用画笔函数

看起来你想让不同的D3画笔（月度、日度等）触发对应的专属逻辑，而不是共用同一个无差别的处理函数对吧？这里有两种实用的方法可以解决这个问题：

方法1：用闭包创建专属事件处理函数 #

通过闭包把每个画笔对应的比例尺、图表容器等变量封装起来，生成只属于当前画笔的brushmove和brushend函数，这样每个画笔触发事件时都能访问到自己的上下文数据。

// 封装一个创建专属处理函数的工具函数
function createBrushHandlers(xScale, targetChart) {
  return {
    // 专属的brushmove逻辑
    brushmove: function(event) {
      const selection = event.selection;
      if (selection) {
        // 用当前画笔对应的比例尺转换选区范围
        const [startValue, endValue] = selection.map(xScale.invert);
        console.log("当前操作的是月度画笔，选区范围:", startValue, endValue);
        // 在这里编写针对targetChart（比如svg_bar1）的更新逻辑
      }
    },
    // 专属的brushend逻辑
    brushend: function(event) {
      if (!event.selection) {
        console.log("月度画笔已清除，恢复图表显示");
        // 在这里编写针对targetChart的恢复逻辑
      }
    }
  };
}

// 为月度画笔绑定专属处理函数
const monthBrushHandlers = createBrushHandlers(xScale_month, svg_bar1);
var brush_month = d3.brushX()
  .extent([[xScale_month.range()[0], padding],[xScale_month.range()[1], h_bar - padding ]])
  .on("brush", monthBrushHandlers.brushmove)
  .on("end", monthBrushHandlers.brushend);
var brushg_month = svg_bar1.append("g")
  .attr("class","brush")
  .call(brush_month);

// 为日度画笔绑定专属处理函数（同理）
const dayBrushHandlers = createBrushHandlers(xScale_day, svg_bar2);
var brush_day = d3.brushX()
  .extent([[xScale_day.range()[0], padding],[xScale_day.range()[1], h_bar - padding ]])
  .on("brush", dayBrushHandlers.brushmove)
  .on("end", dayBrushHandlers.brushend);
var brushg_day = svg_bar2.append("g")
  .attr("class","brush")
  .call(brush_day);

方法2：给画笔组添加自定义属性，在通用函数中区分 #

如果多个画笔的处理逻辑差异不大，可以复用同一个brushmove和brushend函数，通过给画笔的<g>元素添加自定义数据属性，在函数中判断当前操作的是哪个画笔，再执行对应逻辑。

// 通用的brushmove函数
function brushmove(event) {
  const currentBrushGroup = d3.select(this);
  // 获取自定义属性中的画笔标识
  const brushType = currentBrushGroup.attr("data-brush-type");
  
  // 根据标识匹配对应的比例尺和图表容器
  let targetScale, targetChart;
  if (brushType === "month") {
    targetScale = xScale_month;
    targetChart = svg_bar1;
  } else if (brushType === "day") {
    targetScale = xScale_day;
    targetChart = svg_bar2;
  }

  const selection = event.selection;
  if (selection) {
    const [startValue, endValue] = selection.map(targetScale.invert);
    console.log(`当前操作的是${brushType}画笔，选区范围:`, startValue, endValue);
    // 执行对应图表的更新逻辑
  }
}

// 通用的brushend函数
function brushend(event) {
  const currentBrushGroup = d3.select(this);
  const brushType = currentBrushGroup.attr("data-brush-type");
  
  if (!event.selection) {
    console.log(`${brushType}画笔已清除，恢复图表显示`);
    // 执行对应图表的恢复逻辑
  }
}

// 月度画笔：添加自定义标识
var brush_month = d3.brushX()
  .extent([[xScale_month.range()[0], padding],[xScale_month.range()[1], h_bar - padding ]])
  .on("brush", brushmove)
  .on("end", brushend);
var brushg_month = svg_bar1.append("g")
  .attr("class","brush")
  .attr("data-brush-type", "month") // 添加自定义标识
  .call(brush_month);

// 日度画笔：添加自定义标识
var brush_day = d3.brushX()
  .extent([[xScale_day.range()[0], padding],[xScale_day.range()[1], h_bar - padding ]])
  .on("brush", brushmove)
  .on("end", brushend);
var brushg_day = svg_bar2.append("g")
  .attr("class","brush")
  .attr("data-brush-type", "day") // 添加自定义标识
  .call(brush_day);

两种方法的适用场景 #

• 闭包方式：适合每个画笔的处理逻辑差异较大的场景，代码模块化程度高，便于维护。
• 自定义属性方式：适合多个画笔逻辑相似的场景，减少重复代码，更简洁。

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