Vue3组合式API下D3多刷选功能中drawBrushes函数问题排查

希望在Vue3应用中使用D3实现多刷选（multi-brushing）功能，已有原生JS和D3的最小示例参考。目前通过计算属性newBrush和onMounted钩子实现了基础刷选，但drawBrushes函数存在问题，需排查错误。

模板代码 #

<template>
  <div>
    <svg :height="height" :width="width">
      <g>
        <rect :width="width" :height="height" class="rect"></rect>
        <g ref="gBrushes"></g>
      </g>
    </svg>
  </div>
</template>

脚本代码 #

<script setup>
import { computed } from "@vue/reactivity";
import { onMounted, reactive, ref } from "vue";
import * as d3 from "d3";

const margin = reactive({
  top: 10,
  right: 10,
  bottom: 10,
  left: 10,
});
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const gBrushes = ref();

// 存储d3-brush实例及其ID
const brushes = ref([]);

onMounted(() => {
  d3.select(gBrushes.value).call(newBrush.value);
});

const newBrush = computed(() => {
  var brush = d3.brush().on("end", brushend);

  function brushend() {
    brushes.value.push({ id: brushes.value.length, brush: brush });

    // 始终绘制所有刷选框
    drawBrushes();
  }

  return brush;
});

function drawBrushes() {
  console.log("hey there!");

  var brushSelection = d3
    .select(gBrushes.value)
    .selectAll(".brush")
    .data(brushes.value, function (d) {
      return d.id;
    });

  // 初始化新刷选框
  brushSelection
    .enter()
    .insert("g", ".brush")
    .attr("class", "brush")
    .attr("id", function (brush) {
      return "brush-" + brush.id;
    })
    .each(function (brushObject) {
      // 调用brush
      d3.select(this).call(d3.brush(brushObject));
    });


  brushSelection.each(function (brushObject) {
    d3.select(this)
      .attr("class", "brush")
      .selectAll(".overlay")
      .style("pointer-events", function () {
        var brush = brushObject.brush;
        if (
          brushObject.id === brushes.value.length - 1 &&
          brush !== undefined
        ) {
          return "all";
        } else {
          return "none";
        }
      });
  });

  brushSelection.exit().remove();
}
</script>

1. drawBrushes核心错误点 #

• Brush实例调用错误：在enter()阶段的.each()回调中，brushObject是包含id和brush属性的对象，原代码调用d3.brush(brushObject)会重新创建空brush实例，而非复用已保存的brushObject.brush，导致刷选状态丢失。
• 未合并Enter/Update阶段：原代码仅处理Update阶段元素的pointer-events样式，新创建的Enter元素未设置该样式，导致交互异常。
• 计算属性设计缺陷：每次访问newBrush.value都会生成新的brush实例，且首次挂载后，每次刷选结束都会重复添加实例，导致逻辑混乱。
• 缺失刷选范围限制：未通过.extent()指定刷选区域，导致刷选操作超出SVG范围。

2. 修复后的完整代码 #

脚本部分 #

<script setup>
import { onMounted, reactive, ref } from "vue";
import * as d3 from "d3";

const margin = reactive({
  top: 10,
  right: 10,
  bottom: 10,
  left: 10,
});
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const gBrushes = ref();
const brushes = ref([]);

// 创建新brush实例的函数
function createNewBrush() {
  const brush = d3.brush()
    .extent([[0, 0], [width, height]]) // 限制刷选范围在SVG内
    .on("end", brushend);

  function brushend(event) {
    // 仅当存在有效刷选范围时添加新brush
    if (event.selection && event.selection[0][0] !== event.selection[1][0]) {
      brushes.value.push({ 
        id: brushes.value.length, 
        brush: brush,
        selection: event.selection // 保存刷选范围
      });
      drawBrushes();
      // 初始化下一个可交互的brush
      d3.select(gBrushes.value)
        .append("g")
        .attr("class", "brush")
        .attr("id", `brush-${brushes.value.length}`)
        .call(createNewBrush());
    }
  }

  return brush;
}

onMounted(() => {
  // 初始化第一个可交互的brush
  d3.select(gBrushes.value)
    .append("g")
    .attr("class", "brush")
    .attr("id", "brush-0")
    .call(createNewBrush());
});

function drawBrushes() {
  const brushSelection = d3
    .select(gBrushes.value)
    .selectAll(".brush")
    .data(brushes.value, d => d.id);

  // 处理新创建的brush元素
  const enterBrushes = brushSelection.enter()
    .append("g")
    .attr("class", "brush")
    .attr("id", d => `brush-${d.id}`)
    .each(function(d) {
      d3.select(this).call(d.brush);
      // 恢复保存的刷选范围
      d.brush.move(d3.select(this), d.selection);
    });

  // 合并Enter和Update阶段，统一设置交互权限
  brushSelection.merge(enterBrushes)
    .selectAll(".overlay")
    .style("pointer-events", (d, i) => {
      // 仅最后一个brush允许交互
      return i === brushes.value.length - 1 ? "all" : "none";
    });

  // 移除废弃的brush元素
  brushSelection.exit().remove();
}
</script>

样式部分（可选，优化刷选视觉效果） #

<style scoped>
.rect {
  fill: #f5f5f5;
  stroke: #ccc;
}
.brush .selection {
  fill: rgba(100, 149, 237, 0.3);
  stroke: steelblue;
}
</style>

修复说明 #

• 指定刷选范围：通过.extent()将刷选操作限制在SVG可视区域内，避免无效交互。
• 重构Brush创建逻辑：用函数替代计算属性，确保每个brush实例唯一且状态可追踪，同时保存刷选范围用于后续渲染。
• 合并Enter/Update阶段：使用merge()统一处理新创建和已存在的元素，确保所有brush的交互权限设置正确。
• 优化触发逻辑：仅当用户绘制有效选框时才添加新brush，避免空刷选导致的无效实例堆积。

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