如何修复D3.js中‘Uncaught Error: unknown type: dragstart’错误？

嘿，这个错误其实很好理解：你在D3.js的拖拽行为里用了它不认识的事件类型dragstart。D3的拖拽模块（d3-drag）自己封装了一套事件名，和原生的拖拽事件名不一样：

• 对应原生dragstart的，D3里要写start
• 拖拽过程中的事件就是drag（这个你写对了）
• 对应原生dragend的，D3里要写end

你直接用了原生拖拽事件的名字，D3自然识别不了，就抛出这个错误啦。

另外看你的DOM代码，还有个小问题：

container
  .append('g')
  .attr('class', 'dot')
  .selectAll('circle')
  .append('circle')

这里selectAll('circle')是去找.dot这个g元素里的circle，但你刚创建这个g，里面根本没有circle，虽然append('circle')最后也能创建出元素，但这不符合D3的常规写法，反而容易让人困惑，直接去掉selectAll('circle')就好。

改好的代码如下 #

// 修正拖拽事件名称
const drag = d3
  .drag()
  .on('start', dragstarted)  // 把dragstart换成start
  .on('drag', dragged)
  .on('end', dragended)     // 把dragend换成end

// 简化circle的创建逻辑
container
  .append('g')
  .attr('class', 'dot')
  .append('circle')
  .attr('r', 5)
  .attr('cx', 30)
  .attr('cy', 30)
  .call(drag)

这样改完，拖拽事件就能被D3正确识别，circle的创建逻辑也更清晰啦。

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