如何使用d3.drag()？及TypeError: callback is undefined报错原因排查

嘿，我来帮你解答这两个D3.js的问题～

d3.drag()是D3.js实现拖拽交互的核心方法，用起来很直观，分这几步操作：

• 第一步：创建拖拽行为对象
  用d3.drag()生成一个拖拽行为实例，再通过.on()绑定拖拽不同阶段的事件，常用的有三个：

  • start：拖拽刚开始时触发
  • drag：拖拽过程中持续触发
  • end：拖拽结束时触发

• 第二步：将拖拽行为绑定到目标元素
  选中你想要设置为可拖拽的DOM元素（比如SVG容器、圆形、矩形），用.call()方法把创建好的拖拽行为绑定上去。

• 第三步：定义事件回调函数
  为每个拖拽事件编写对应的处理函数，函数里可以获取事件对象（包含当前鼠标位置等信息）和绑定的数据，以此实现具体的拖拽逻辑，比如更新元素位置。

给你举个完整的示例，实现一个可拖拽的蓝色圆形：

// 创建SVG容器
const svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 添加一个可拖拽的圆形
const circle = svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 20)
  .style("fill", "#4287f5");

// 创建拖拽行为
const drag = d3.drag()
  .on("start", handleDragStart)
  .on("drag", handleDragging)
  .on("end", handleDragEnd);

// 绑定拖拽行为到圆形
circle.call(drag);

// 拖拽开始的回调：把圆形改成红色
function handleDragStart(event, d) {
  d3.select(this).style("fill", "#f54242");
}

// 拖拽过程的回调：更新圆形位置
function handleDragging(event, d) {
  d3.select(this)
    .attr("cx", event.x)
    .attr("cy", event.y);
}

// 拖拽结束的回调：把圆形改回蓝色
function handleDragEnd(event, d) {
  d3.select(this).style("fill", "#4287f5");
}

这个报错是JavaScript变量提升导致的代码顺序问题：

在你提供的代码里，var drag虽然用var声明了，但变量提升只会提升声明，不会提升赋值。当执行.call(drag)的时候，drag还只是一个undefined的变量，D3内部调用拖拽行为的回调时找不到有效的对象，就会抛出callback is undefined的错误。

原来的错误代码顺序：

// 这里调用drag的时候，drag还没被赋值，是undefined
var svg = d3.select("body").append("svg") 
  .attr("width", 500) 
  .attr("height", 500) 
  .call(drag) 

// 这里才给drag赋值
var drag = d3.drag() 
  .on("start", start) 
function start(d){ }; 

只需要调整代码顺序，**先定义拖拽行为drag，再调用.call(drag)**就可以修复：

// 先定义拖拽行为
var drag = d3.drag() 
  .on("start", start) 
function start(d){ }; 

// 再创建SVG并绑定拖拽行为
var svg = d3.select("body").append("svg") 
  .attr("width", 500) 
  .attr("height", 500) 
  .call(drag) 

这样当执行.call(drag)时，drag已经是一个有效的D3拖拽行为对象了，就不会再报错啦～

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