Question

我正在使用mousedown和mouseup事件在svg g上注册mousedown，mouseup和d3拖动行为，我将在2个节点（即mouseup节点和mousedown节点）之间创建链接。

以前在v3中，mouseup事件正常运行。但是在d3v4中，我没有收到mouseup事件的呼叫，而是在dragend事件中得到了呼叫，如下面的代码所示。

为什么我没有获得mouseup事件调用以及如何解决？

我在d3相关论坛中进行了搜索，但找不到任何解决方案。

更新

我将从一个圆上单击并将该线放到另一个圆上，使用mousedown事件，我将能够获取一个圆的dom。如何获取另一个圆的dom（即在放下该线时将mouseup移到另一个圆）。 dragevent仅提供被单击的节点dom。

有一种解决方案，可将元素置于dragend中的鼠标位置下，但在我的项目中，我无法使用该解决方案。

那么有没有一种方法可以触发mouseup事件，以便我可以在本地事件上获得正确的dom？

下面是有效的代码段。

thisGraph = this;
    thisGraph.drag = d3.drag()
        .on("drag", function (a,aa,aaa) {
            thisGraph.dragLine.attr("class","dragline")
            var circ = aaa[0]
            thisGraph.dragLine.attr('d', 'M' + $(aaa[0]).attr("cx") + ',' + $(aaa[0]).attr("cy") + 'L' + d3.event.sourceEvent.clientX + ',' + d3.event.sourceEvent.clientY);

        })
        .on("end", function (data,index,dom) {

            thisGraph.dragLine.attr("class","")
            console.log("drag end called",dom)

        });
    var svg = d3.select('#svgnow');
    svg.attr("height","500px");
    svg.attr("width","500px")

    thisGraph.dragLine = svg.append('svg:path')
        .attr("class","dragline")
        .attr('d', 'M0,0L0,0')
        .style('marker-end', 'url(#mark-end-arrow)');

    var circle = svg.append("circle")
        .attr("cx",100)
        .attr("cy",100)
        .attr("r",20)
        .style("fill","blue")
        .on("mousedown",function (d,index,dom) {
            console.log("mousedown event called....",dom)
        })
        .on("mouseup",function (d,index,dom) {
            console.log("mouseup event called....",dom)
        })
        .call(thisGraph.drag);


    var circle2 = svg.append("circle")
        .attr("cx",200)
        .attr("cy",100)
        .attr("r",20)
        .style("fill","red")
        .on("mousedown",function (d,index,dom) {
            console.log("mousedown event called....",dom)
        })
        .on("mouseup",function (d,index,dom) {
            console.log("mouseup event called....",dom)
        })
        .call(thisGraph.drag);

  path.dragline{
        stroke: black;
        stroke-width: 2px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>

<div id="container">
    <svg id="svgnow" style="border:2px solid red;">
    </svg>
</div>

mouseup事件未在d3中触发

0 个答案: