Javascript 与d3中的其他元素执行双鼠标事件

我试图在节点上为mousedown上显示的周围弧触发mouseup事件

我想要的功能是按住一个节点并将其拖动到一个弧中，触发弧和节点的鼠标点击事件。我在下面的JSFIDLE中引用的当前代码中遇到了问题，非常感谢您的帮助

对于我的弧，我有以下代码，我希望在鼠标悬停在特定弧上方时执行这些代码：

slices.append('path')
    ...
    .on('mouseup', function(arc) {
        console.log(arc.data.title)
    }
);

我还希望在将节点拖动到特定圆弧上并释放鼠标按钮后运行节点的鼠标：

svg.append("g")
        .attr("class", "node")
        .selectAll(".bubble")
          .data(data, function(d){ return d.id; })
        .enter().append("circle")
        ...
        .on('mousedown', nodeClickedArcs)
        .on('mouseup', removeArcs)

谢谢大家!

---

这里的关键挑战是鼠标事件基本上被圆圈吸收。您也许可以对元素进行排序，使弧的父

g

将子

g

与圆一起保存，以允许事件向上传播到相关的父元素，但此时圆位于弧的下方

我将在下面演示的一个选项是在拖动过程中从节点剥离指针交互。这不会中断拖动（在Chrome、Firefox、IE上测试），但允许鼠标与其他元素进行交互，例如鼠标悬停/鼠标退出事件。然后我们可以监听鼠标进入（和退出）目标形状，如果拖动结束（鼠标向上）在目标形状上，我们可以触发特定动作

这需要鼠标向上的所有事件逻辑都位于“拖动结束”函数中，但需要目标形状的鼠标进入/退出侦听器

基于上述内容，在下面的代码片段I中：

拖动时从拖动的节点（圆）剥离指针事件

如果鼠标在目标形状（矩形）上移动，请收听并更新该元素的基准以反映其“活动”状态。相反，如果鼠标离开目标形状，我会将节点设置为非活动状态

如果拖动事件在目标形状处于活动状态时结束，则我知道拖动的节点位于目标形状上方（并且发生了鼠标向上移动），并且可以相应地执行操作。如果拖动事件结束时没有活动节点，则将指针事件还原到该节点

在下面的代码段中，如果节点（圆）位于目标形状（矩形）上，我将删除它们，并在过程中更新矩形颜色：

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，300）；
var drag=d3.drag（）
.打开（“拖动”，拖动）
.在（“结束”，德拉根德）；
var squares=svg.selectAll（“rect”）
.data（[{x:30}，{x:130}，{x:230}，{x:330}，{x:430}]）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{return d.x；}）
.attr（“y”，120）
.attr（“宽度”，40）
.attr（“高度”，40）
.attr（“填充”、“白色”）
.on（“mouseenter”，函数（d）{d.active=true；}）
.on（“mouseout”，函数（d）{d.active=false；}）；
var circles=svg.selectAll（“圆”）
.数据（d3.范围（20））
.输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{返回d/21*500+25；}）
.attr（“cy”，函数（d）{返回d%2*40+50；}）
.attr（“r”，10）
.attr（“fill”，函数（d）{return d3.schemeCategory20[d]；}）
.呼叫（拖动）；
函数（d）{
var x=d3.鼠标（this）[0]；
var y=d3.鼠标（this）[1]；
d3.选择（本）
.attr（“cx”，x）
.attr（“cy”，y）
.style（“指针事件”、“无”）；
}
函数dragEnd（d）{
var rect=平方。过滤器（函数（d）{
返回d.active；
})
如果（！rect.empty（））{
var circle=d3。选择（此项）；
矩形属性（“填充”，内插颜色（矩形，圆））；
圈。删除（）；
}
否则{
d3.选择（this）.style（“指针事件”、“全部”）；
}
}
函数插值颜色（r，c）{
返回d3.B（r.attr（“填充”）、c.attr（“填充”））（0.5）
}

svg{
笔画：黑色；
笔画宽度：2px；
}