在d3.js中的拖放操作期间,不会触发鼠标悬停事件

我试图在其他圆圈上拖一个圆圈来连接两条路径.问题是当我将一个圆圈(c2)拖到另一个圆圈(c1)上时,如果在圆圈c2之前创建圆圈c1,则不会触发c1鼠标悬停事件.

这里的js小提琴链接

    var closedRoad = true;

    var width = 960,
        height = 500;

    var points = d3.range(1, 5).map(function(i) {
        return [i * width / 5, 50 + Math.random() * (height - 100)];
    });

    var points1 = d3.range(1, 5).map(function(i) {
        return [i * width / 5, 50 + Math.random() * (height - 100)];
    });

    var points2 = d3.range(1, 5).map(function(i) {
        return [i * width / 5, 50 + Math.random() * (height - 100)];
    });

    var count = 0;
    var ways =  [];

    var currentWay = null;

    var selected = null;

    var line = d3.svg.line();

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    var rect = svg.append("rect")
    .attr("width", width)
    .attr("height", height);

    ways.forEach(function(way, i) {
        svg.append("path")
        .datum(way)
        .attr("id", "p" + way.id)
        .attr("class", "line")
        .call(redraw);
    });

    d3.select(window)
    .on("keydown", keydown)
    //.on("mousemove", mousemove)
    //.on("mouseup", mouseup)
    .on("mousedown", mousedown)
    .on("dblclick", dblclick);

    function redraw(way) {
        way.attr("d", function(d) { return line(d.pts); });

        var circle = svg.selectAll(".way" + way.data()[0].id)
        .data(way.data()[0].pts, function(d) { return d; });
        circle.enter().append("circle")
        .attr("class", "way" + way.data()[0].id)
        .attr("r", 1e-6)
        .on("mousedown", function(d) { 
            if (closedRoad) {
                currentWay = way.data()[0];
                selected = d; 

                if (d3.event) {
                    d3.event.preventDefault();
                    d3.event.stopPropagation();
                }
            }
        })
        .on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); })
        .on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); })
        .transition()
        .duration(750)
        .ease("elastic")
        .attr("r", 6.5);

        circle
        .attr("cx", function(d) { return d[0]; })
        .attr("cy", function(d) { return d[1]; });

        ////
        var drag = d3.behavior.drag();
        drag.on("dragstart", function(d) {
            console.log('START');
        })
        .on("drag", function(d) {
            console.log('MOVE');

            var m = d3.mouse(svg.node());
            d[0] = Math.max(0, Math.min(width, m[0]));
            d[1] = Math.max(0, Math.min(height, m[1]));

            //redraw(way);
            redrawAll();
        })
        .on("dragend", function(d) {
            console.log('END');
        });

        circle.call(drag);
        ////

        circle.exit().remove();

    }

    function dblclick() {
        currentWay.pts.pop();
        //redraw(svg.select("#p" + currentWay.id));
        redrawAll();

        closedRoad = true;
    }

    function mousedown() {
        if (closedRoad) {
            currentWay = { id: ++count, pts: [] };
            ways.push(currentWay); 

            svg.append("path")
            .datum(currentWay)
            .attr("id", "p" + currentWay.id)
            .attr("class", "line")
            .on("mouseover", function() { 
                d3.select(d3.event.target).classed("highlight", true); 
            })
            .on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); })
            .call(redraw);

            closedRoad = false;
        }

        currentWay.pts.push(selected = d3.mouse(svg.node()));
        //redraw(svg.select("#p" + currentWay.id));
        redrawAll();
    }

    function redrawAll() {
        ways.forEach(function(way, i) {
            redraw(svg.select("#p" + way.id));
        });
    }

    function mousemove() {

    }


    function keydown() {
        if (!selected) return;
        switch (d3.event.keyCode) {
            case 8: // backspace
            case 46: { // delete
                var i = currentWay.pts.indexOf(selected);
                currentWay.pts.splice(i, 1);
                selected = currentWay.pts.length ? currentWay.pts[i > 0 ? i - 1 : 0] : null;
                redraw(svg.select("#p" + currentWay.id));
                break;
            }
        }
    }

你能帮助我吗？

谢谢!前!