React集成d3-lasso实现散点图圈选遇报错求助

开发者阿泽

2026-8-12

问题1：运行时 `d3 is not defined` 错误

d3-lasso 插件依赖全局作用域中的 d3 对象，但 ES 模块导入的 d3 不会自动挂载到全局。解决方法是在导入后手动将 d3 绑定到全局：

import * as d3 from 'd3';
import { lasso } from 'd3-lasso';

// 将d3挂载到全局，供d3-lasso调用
window.d3 = d3;

问题2：TypeScript 类型声明警告

官方无 @types/d3-lasso 包，手动创建类型声明文件即可消除警告：

在项目 src 目录下新建 d3-lasso.d.ts 文件
写入以下内容：

declare module 'd3-lasso';

代码逻辑修正

你原代码中直接用导入的 lasso 函数调用实例方法（如 items()）是错误的，需从事件对象中获取当前 lasso 实例：

const lasso_start = (e) => {
  const lassoInstance = e.target;
  lassoInstance.items()
    .attr("r", 3.5)
    .classed("not_possible", true)
    .classed("selected", false);
};

const lasso_draw = (e) => {
  const lassoInstance = e.target;
  lassoInstance.possibleItems()
    .classed("not_possible", false)
    .classed("possible", true);
  lassoInstance.notPossibleItems()
    .classed("not_possible", true)
    .classed("possible", false);
};

const lasso_end = (e) => {
  const lassoInstance = e.target;
  lassoInstance.items()
    .classed("not_possible", false)
    .classed("possible", false);
  lassoInstance.selectedItems()
    .classed("selected", true)
    .attr("r", 7);
  lassoInstance.notSelectedItems()
    .attr("r", 3.5);
};

const lassoSelect = () => lasso()
  .items(resultChart.selectAll('circle'))
  .targetArea(resultChart)
  .on("start", lasso_start)
  .on("draw", lasso_draw)
  .on("end", lasso_end);

resultChart.call(lassoSelect());