d3.js 强制取消拖动事件

我有一个简单的拖动事件 - 如果满足特定条件，我想强制取消当前正在进行的拖动（基本上就像您正在执行鼠标向上操作一样）。

像这样：

var drag_behavior = d3.behavior.drag()
.on("drag", function() {
    if(mycondition){
       // cancel the drag event
    }
});

EDIT:

目标只是防止人们将世界地图拖到某些边界之外，从而将地图渲染在海洋中部（详细信息如下）。

当前地图代码：

var width = window.innerWidth
var height = window.innerHeight

var projection = d3.geo.mercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([width / 2, height/1.5])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

var drag_behavior_map = d3.behavior.drag()
.on("drag", function() {
    drag_click = true //used later to prevent dragend to fire off a click event
    d3.event.sourceEvent.stopPropagation();

    // original idea
    // if(worldmap_left_boundary > 0 || worldmap_right_boundary < screen.height){
    //    cancel or limit the drag here
    // }
});

var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height)
.call(drag_behavior_map)

基本上这应该是不可能的。

在 - 的里面drag事件函数，您可以使用mycondition决定是否更新拖动元素的位置。不更新位置本质上意味着停止拖动。

您还可以取消订阅drag event:

var drag_behavior = d3.behavior.drag()
  .on("drag", function() {
    if(mycondition) {
       // cancel the drag event
       drag_behavior.on("drag", null);
    }
  });

注意，仍然会有一个dragend事件，除非您也取消订阅该事件。

或者 - 尽管我并不完全熟悉触发本机事件及其影响d3.behavior.drag()–– 你可以尝试触发一个nativemouseup事件并看看会发生什么。

var drag_behavior = d3.behavior.drag()
  .on("drag", function() {
    if(mycondition) {
      // "this" is the dragged dom element
      this.dispatchEvent(new Event('mouseup'))
    }
  });