如何在javascript中获取d3.js中的拖动事件？

下面是使用d3.js在javascript中绘制力定向图的代码

const图={
节点：[{
姓名：'约翰'，
年龄:35
},
{
姓名：“西蒙”，
年龄:37
},
{
姓名：“manjoor”，
年龄:35
},
{
姓名：“lorg”，
年龄:34
},
{
姓名：'kilvin'，
年龄:32
},
],
链接：[{
资料来源：“约翰”，
目标：“西蒙”
},
{
资料来源：“约翰”，
目标：“manjoor”
},
{
资料来源：“西蒙”，
目标：“lorg”
},
{
资料来源：“西蒙”，
目标：“基尔文”
},
{
资料来源：“manjoor”，
目标：“基尔文”
},
{
资料来源：“lorg”，
目标：“约翰”
},
{
资料来源：“lorg”，
目标：“manjoor”
},
{
资料来源：“kilvin”，
目标：“manjoor”
},
]
}
const canvas=d3.选择（“#网络”）
常量宽度=canvas.attr（'width'）
常量高度=canvas.attr（'高度'）
常数r=30
const ctx=canvas.node（）.getContext（'2d'）
常量color=d3.scaleOrdinal（d3.schemeacent）；
常量模拟=d3.forceSimulation（）
.力（'x'，d3.力x（宽度/2））
.力（'y'，d3.力（高度/2））
.力（'碰撞'，d3.力碰撞（r+20））
.force（'电荷'，d3.forceManyBody（）.强度（-100））
.force（'link'，d3.forceLink（）.id（node=>node.name））
.on（'tick'，update）
模拟.节点（图.节点）
simulation.force（'link'）.links（图.links）
canvas.call（d3.drag（）
.container（canvas.node（））
.subject（dragsubject）.on（'start'，dragstarted）
.on（'拖动'）.on（'结束'，拖动）
)
函数更新（）{
ctx.clearRect（0，0，宽度，高度）
ctx.beginPath（）
ctx.globalAlpha=0.5
ctx.strokeStyle='蓝色'
graph.links.forEach（drawLink）
ctx.stroke（）
ctx.beginPath（）
ctx.globalAlpha=1
graph.nodes.forEach（drawNode）
ctx.fill（）
}
函数dragsubject（事件）{
返回模拟.find（d3.event.x，d3.event.y）
}
功能节点（d）{
ctx.fillStyle=颜色（d.party）
ctx.移动到（d.x，d.y）
ctx.arc（d.x，d.y，r，0，Math.PI*2）
}
功能拉杆（l）{
ctx.moveTo（l.source.x，l.source.y）
ctx.lineTo（l.target.x，l.target.y）
}
函数dragstarted（事件）{
如果（！event.active）simulation.alphaTarget（0.3）.restart（）；
event.subject.fx=event.subject.x；
event.subject.fy=event.subject.y；
}
函数（事件）{
event.subject.fx=event.x；
event.subject.fy=event.y；
}
功能已禁用（事件）{
如果（！event.active）simulation.alphaTarget（0）；
event.subject.fx=null；
event.subject.fy=null；
}
update（）

---

您正在使用d3版本6<代码>d3。事件已被删除。请仔细阅读，降级你的d3版本，或寻找更多最新的例子

const图={
节点：[{
姓名：'约翰'，
年龄:35
},
{
姓名：“西蒙”，
年龄:37
},
{
姓名：“manjoor”，
年龄:35
},
{
姓名：“lorg”，
年龄:34
},
{
姓名：'kilvin'，
年龄:32
},
],
链接：[{
资料来源：“约翰”，
目标：“西蒙”
},
{
资料来源：“约翰”，
目标：“manjoor”
},
{
资料来源：“西蒙”，
目标：“lorg”
},
{
资料来源：“西蒙”，
目标：“基尔文”
},
{
资料来源：“manjoor”，
目标：“基尔文”
},
{
资料来源：“lorg”，
目标：“约翰”
},
{
资料来源：“lorg”，
目标：“manjoor”
},
{
资料来源：“kilvin”，
目标：“manjoor”
},
]
}
const canvas=d3.选择（“#网络”）
常量宽度=canvas.attr（'width'）
常量高度=canvas.attr（'高度'）
常数r=30
const ctx=canvas.node（）.getContext（'2d'）
常量color=d3.scaleOrdinal（d3.schemeacent）；
常量模拟=d3.forceSimulation（）
.力（'x'，d3.力x（宽度/2））
.力（'y'，d3.力（高度/2））
.力（'碰撞'，d3.力碰撞（r+20））
.force（'电荷'，d3.forceManyBody（）.强度（-100））
.force（'link'，d3.forceLink（）.id（node=>node.name））
.on（'tick'，update）
模拟.节点（图.节点）
simulation.force（'link'）.links（图.links）
canvas.call（d3.drag（）
.container（canvas.node（））
.subject（dragsubject）.on（'start'，dragstarted）
.on（'拖动'）.on（'结束'，拖动）
)
函数更新（）{
ctx.clearRect（0，0，宽度，高度）
ctx.beginPath（）
ctx.globalAlpha=0.5
ctx.strokeStyle='蓝色'
graph.links.forEach（drawLink）
ctx.stroke（）
ctx.beginPath（）
ctx.globalAlpha=1
graph.nodes.forEach（drawNode）
ctx.fill（）
}
函数dragsubject（事件）{
返回模拟查找（event.x，event.y）；
}
功能节点（d）{
ctx.fillStyle=颜色（d.party）
ctx.移动到（d.x，d.y）
ctx.arc（d.x，d.y，r，0，Math.PI*2）
}
功能拉杆（l）{
ctx.moveTo（l.source.x，l.source.y）
ctx.lineTo（l.target.x，l.target.y）
}
函数dragstarted（事件）{
如果（！event.active）simulation.alphaTarget（0.3）.restart（）；
event.subject.fx=event.subject.x；
event.subject.fy=event.subject.y；
}
函数（事件）{
event.subject.fx=event.x；
event.subject.fy=event.y；
}
功能已禁用（事件）{
如果（！event.active）simulation.alphaTarget（0）；
event.subject.fx=null；
event.subject.fy=null；
}
update（）

您使用的d3版本是什么？我使用的是最新版本。。。刚刚安装。有没有办法让节点拖动？好的。伟大的谢谢我会处理好的，再帮我一个忙。有没有一种方法可以将d3.js与konva.js一起使用？从来没有听说过，sorryHi Ruben知道如何仅在拖动时应用拖动。节点？现在无论你点击舞台上的哪个节点都会被拖走我很困惑，不是吗？