在d3中使用其他元素执行双鼠标事件

Question

我试图在我的节点上发出一个鼠标事件，用于在mousedown上出现的周围弧。

我的预期功能是能够按住节点并将其拖动到弧形中，触发弧线以及节点的mouseup事件。 我在使用下面的JSFiddle中引用的当前代码时遇到问题，非常感谢您的帮助！

对于我的弧线，我有以下代码，我希望在将鼠标放在特定弧线上方时执行鼠标操作：

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)

谢谢！

http://jsfiddle.net/uas6zr7y/3/

Answer 1

这里的关键挑战是鼠标事件基本上被圆圈吸收。 您也许可以这样的方式对元素进行排序，即弧的父g保持带有圆圈的子g ，以允许事件传播到相关的父级，但是然后您的圆圈位于弧的下方。

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

这要求鼠标向上的所有事件逻辑都位于拖动结束功能中，但需要用于鼠标进入/退出目标形状的监听器。

基于以上所述，在下面的代码片段中我：

1. 在拖动时从拖动的节点（圆圈）中剥离指针事件。
2. 监听鼠标是否移动到目标形状（矩形）上并更新该元素的基准以反映其“活动”状态。 相反，如果鼠标移出目标形状，我将节点设置为不活动。
3. 如果拖动事件在目标形状处于活动状态时结束，那么我知道我的拖动节点已超过目标形状（并且已经发生了鼠标向上）并且可以相应地执行操作。 如果拖动事件以没有活动节点结束，则我将指针事件恢复到节点。

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

 var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 300); var drag = d3.drag() .on("drag",dragged) .on("end", dragEnd); var squares = svg.selectAll("rect") .data([{x:30},{x:130},{x:230},{x:330},{x:430}]) .enter() .append("rect") .attr("x", function(d) { return dx; }) .attr("y", 120) .attr("width", 40) .attr("height",40) .attr("fill","white") .on("mouseenter", function(d) { d.active = true; }) .on("mouseout", function(d) { d.active = false; }); var circles = svg.selectAll("circle") .data(d3.range(20)) .enter() .append("circle") .attr("cx", function(d) { return d/21*500 + 25; }) .attr("cy", function(d) { return d%2 * 40 + 50; }) .attr("r", 10) .attr("fill", function(d) { return d3.schemeCategory20[d]; }) .call(drag); function dragged(d) { var x = d3.mouse(this)[0]; var y = d3.mouse(this)[1]; d3.select(this) .attr("cx",x) .attr("cy",y) .style("pointer-events","none"); } function dragEnd(d) { var rect = squares.filter(function(d) { return d.active; }) if(!rect.empty()) { var circle = d3.select(this); rect.attr("fill",interpolateColor(rect,circle)); circle.remove(); } else { d3.select(this).style("pointer-events","all"); } } function interpolateColor(r,c) { return d3.interpolateLab(r.attr("fill"),c.attr("fill"))(0.5) } 

 svg { stroke: black; stroke-width: 2px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script> 

这会检查鼠标位置，而不是圆圈与矩形重叠，碰撞检测需要采用不同的方法