D3拖拽函数报错：无法读取null的'x'属性，求技术支持

这个错误大概率是D3版本差异导致的——你之前用的代码应该是基于D3 v5或更早版本，但当前环境升级到了D3 v6+，这两个版本在拖拽事件的处理逻辑上有个关键变化：

在D3 v6及以后的版本中，全局的d3.event对象已经被移除了！拖拽事件的处理函数会直接把事件对象作为第一个参数传入，而不是通过全局变量访问。你的dragged函数里还在尝试访问d3.event.x，这个值在新版本里就是null，所以才会抛出这个类型错误。

修正后的拖拽函数代码 #

把你的拖拽相关函数改成下面这样，直接使用传入的event参数：

function pointer() {
  this.style.cursor = 'pointer';
}

function dragstarted(event, d) {
  d3.select(this).raise().classed('active', true);
}

function dragged(event, d) {
  // 用传入的event对象代替d3.event
  d3.select(this).attr('transform', `translate(${event.x}, ${event.y})`);
}

function dragended(event, d) {
  d3.select(this).classed('active', false);
}

额外注意事项 #

你的文本元素同时设置了x/y属性和transform属性，这可能会导致位置计算出现混淆。如果后续发现拖拽后的位置不符合预期，可以考虑：

• 移除初始的x/y属性设置，完全用transform来控制位置；
• 或者在拖拽开始时记录初始位置，基于偏移量来更新transform，比如：

  function dragstarted(event, d) {
    d3.select(this).raise().classed('active', true);
    // 保存初始的x/y数据值
    d._initialX = d.x;
    d._initialY = d.y;
  }
  
  function dragged(event, d) {
    // 计算相对于初始位置的偏移量
    const dx = event.x - xScale(d._initialX);
    const dy = event.y - yScale(d._initialY);
    d3.select(this).attr('transform', `translate(${dx}, ${dy})`);
  }
  

如果你的D3版本确实是v5或更早，那可能需要检查拖拽行为的初始化是否有问题，或者元素是否正确绑定了数据，但根据报错信息，版本不兼容是最可能的根源。

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