如何在d3.js v4中实现文本拖拽？原v3示例无法运行

没问题，我帮你把这段代码调整成D3v4可用的版本～

D3从v3升级到v4时，拖拽行为的API有不少变化，主要是模块结构的调整，下面是修改后的完整代码：

优化后的CSS #

#draggable{ 
  text-anchor: middle; 
  cursor: pointer; 
}

注：原CSS里重复写了两次text-anchor，后面的middle会覆盖前面的start，所以直接保留生效的属性即可。

适配D3v4的JS代码 #

function dragmove(d) {
  d3.select(this)
    .attr("y", d3.event.y)
    .attr("x", d3.event.x)
}

// D3v4中拖拽行为从d3.behavior.drag()改为d3.drag()
var drag = d3.drag()
  .on("drag", dragmove);

d3.select("body").append("svg")
  .attr("height", 300)
  .attr("width", 300)
  .append("text")
  .attr("x", 150)
  .attr("y", 150)
  .attr("id", "draggable")
  .text("Drag me bro!")
  .call(drag)

关键变化说明 #

• 拖拽行为的初始化：D3v3里的d3.behavior.drag()在v4中被重构为d3.drag()，这是v4对模块拆分后的调整，所有行为类API都不再放在behavior命名空间下。
• 事件坐标的获取方式在这个场景下和v3保持一致，依然可以用d3.event.x和d3.event.y来获取拖拽时的坐标。

如果拖拽时你发现文本的位置和鼠标有轻微偏移，可以额外处理文本的基线（比如调整dy属性），不过原示例的逻辑里不需要这部分，保持现有代码就能实现和v3版本一致的拖拽效果。

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