Javascript D3对dragenter和dragleave事件的支持

D3.drag似乎支持拖动，但不支持“拖放”，即不支持检测dragenter、dragleave和dragover事件。我可以让D3创建的对象侦听这些事件，但不能使D3对象可拖动，也不能访问拖动事件属性

这是我的密码

我创建了一个可拖动的svg圆、一个可拖动的D3圆和一个可拖动的D3圆

svg可拖动循环会导致dragenter和dragleave事件，但D3可拖动循环不会

即使我在解决方案中使用svg，我也不知道如何获取拖动事件属性的详细信息（例如，导致该事件的可拖动对象的详细信息）

为什么D3不支持拖拽行为

//创建画布
var canvas=d3.选择（“画布”）
.append（“svg”）
.attr（“宽度”，800）
.attr（“高度”，600）；
var draggableCircleData=[{x:100，y:100}]；
//我可以拖动此圆，但它不会导致另一个圆检测到daragenter/dragleave
var draggableCircle=canvas.append（“圆”）
.数据（DragableCircleData）
.style（“笔划”、“灰色”）
.样式（“填充”、“aliceblue”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“可拖动”、“真实”）
.attr（“r”，40）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
//在圆上补一补。它检测到svg循环的拖动，但没有检测到D3循环
var dragOverCircleData=[{x:300，y:100}]；
var dragOverCircle=canvas.append（“圆”）
.数据（dragOverCircleData）
.style（“笔划”、“灰色”）
.样式（“填充”、“白色”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“r”，40）
.on（“dragenter”，dragenter）
.on（“dragleave”，dragleave）；
函数dragleave（）{
console.log（“检测到Darg leave事件”）
d3.选择（此）样式（“填充”、“白色”）；
}
功能疏水剂（e1）{
控制台日志（“检测到错误输入事件”）
d3.选择（这个）样式（“填充”、“蓝色”）；
}
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
//log（“项已被拖动。d:，d”）
d3.选择（this）.attr（“cx”，d.x=d3.event.x）.attr（“cy”，d.y=d3.event.y）；
d3.选择（this）.attr（“draggable”、“true”）；
}
函数d（d）{
d3.选择（此）.classed（“活动”，false）；
}

没有像D3圆圈这样的东西。所有这些圆圈都是SVG圆圈。谢谢@GerardoFurtado，我的意思是它是由D3追加函数创建的SVG圆圈。另外，我正在设置Dragable属性，它似乎不会导致生成dargenter和dragleave事件。问题是，您的“D3圈”实际上是在

Dragover圈上拖动的。因此，“D3圆”夹在鼠标光标和
dragovercircle
之间。因此，鼠标光标永远不会触及
dragovercircle
，因此不会检测到拖动事件。您可以通过“碰撞检测”或比较圆的位置来解决此问题。看看