拖动和双击组中的冲突

Question

在一个小的d3代码中，我编写了一个圆圈，它在拖动时有一个行为，在双击时有另一个行为：

var new_circ = circles
      .enter() // Add circle to svg
      .append("g")
      .attr("class", "draggableCircle");

    new_circ.append("circle")
    .attr("r", radius*radius_buffer)
    .style('fill', 'transparent');

    new_circ.append("circle")
    .attr("r", radius)
    .style('fill', 'black')
    .attr("class", "visiblecircle");


    svg.selectAll(".draggableCircle")
      .data(dataset) // update circles
      .attr('transform', function(d) {
           return "translate(" + xScale(d[0]) + "," + yScale(d[1]) + ")";
        })
      .on("click", function(d){d3.event.stopPropagation();}) // click callback
      .on("dblclick", mousedownCircle) // dblclick callback
      .call(drag)
      .style('cursor', 'pointer')
      .moveToFront();

当我删除movetoFront（）时，双击并拖动工作。使用movetoFront（）只能拖动工作。 movetoFront如下所示：

d3.selection.prototype.moveToFront = function() {
    return this.each(function(){
        this.parentNode.appendChild(this);
    });
};

任何想法会发生什么？ 提前谢谢！