d3.js - 如何防止d3在右键单击时触发拖动？

Question

我已经定义了一些按预期工作的拖动行为(CoffeeScript 中的代码):

nodeDrag = d3.behavior.drag()
  .on("dragstart", (d, i) ->
    force.stop())
  .on("drag", (d, i) ->
    d.px += d3.event.dx
    d.py += d3.event.dy
    d.x += d3.event.dx
    d.y += d3.event.dy
    tick())
  .on("dragend", (d, i) -> 
    force.resume()
    d.fixed = true
    tick())

// ...

nodes = vis.selectAll(".node")
  .data(graph.nodes)
  .enter()
    .append("g")
    // ...
    .call(nodeDrag)

我现在尝试为节点上的右键单击创建自定义行为。但是，这会触发“dragstart”和“drag”，即在我调用 e.preventDefault() 之后在“contextmenu”事件中，有问题的节点粘在我的鼠标指针上并跟随它，直到我再次(左)单击以强制释放(我假设 e.preventDefault() 也会导致“dragend”永远不会触发)。

我在 thread on Google Groups 中找到了关于这个问题的简短讨论。和 discussion in d3's issues on Github .但是，我无法从这些评论中弄清楚如何防止这种行为。

如何在右键单击时不触发拖动？

Answer 1

我发现可以将拖动手势限制为仅鼠标左键。

它涉及一个记录手势何时启动的附加字段:

dragInitiated = false

然后修改其余代码以分别在“dragstart”和“dragend”上注册所需拖动手势的启动和终止。只有在正确启动了拖动手势时，才会执行“拖动”操作。

nodeDrag = d3.behavior.drag()
  .on "dragstart", (d, i) ->
    if (d3.event.sourceEvent.which == 1) # initiate on left mouse button only
      dragInitiated = true               # -> set dragInitiated to true
      force.stop()
  .on "drag", (d, i) ->
    if (dragInitiated)                   # perform only if a drag was initiated
      d.px += d3.event.dx
      d.py += d3.event.dy
      d.x += d3.event.dx
      d.y += d3.event.dy
      tick()
  .on "dragend", (d, i) ->
    if (d3.event.sourceEvent.which == 1) # only take gestures into account that
      force.resume()                     # were valid in "dragstart"
      d.fixed = true
      tick()
      dragInitiated = false              # terminate drag gesture

我不确定这是否是最优雅的解决方案，但它确实有效并且不是特别笨拙或大黑客。