使用JS实现牛顿摆时d3.drag事件报Cannot read property 'x' of undefined错误

该报错由D3版本API不兼容导致：你安装的d3-drag为v2及以上版本（对应D3 v6+生态），该版本已经正式移除了全局d3.event对象，因此代码中访问d3.event会得到undefined，尝试读取其x属性就触发了本次类型错误。

有两种可落地的修复方案，按需选择即可：

• 方案1：适配新版API（推荐）
  D3 v6+调整了拖拽事件的回调参数规则：第一个参数为事件对象，第二个参数才是元素绑定的数据集d。直接修改拖拽绑定部分的代码即可：

.call(d3.drag()
    .on("start", (event, d) => { d.fx = d.x; d.fy = d.y; })
    .on("drag", (event, d) => { d.fx = event.x; d.fy = event.y; })
    .on("end", (event, d) => { d.fx = null; d.fy = null; })
)

• 方案2：降级依赖版本
  如果不想修改现有代码，可以将相关d3依赖降级到v5生态的兼容版本，执行命令：
  npm install d3-drag@1 d3-force@2
  降级后原有的d3.event写法可以正常运行，注意要保证所有d3相关依赖的版本属于同一生态，避免多版本冲突。

修改完成后重启项目，拖拽牛顿摆的小球，确认可以正常拖动、松开后触发正常摆动效果、控制台无相关报错即可。

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