d3.js - d3.behavior.drag + 按键事件

Question

我正在尝试创建一个具有不同用户交互的基本 D3 组件。例如，仅当用户按下 Alt + 鼠标左键 + 拖动鼠标 时才应启用拖放行为。

如何实现？

Answer 1

你可以这样做:

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

var drag = d3.behavior.drag()
    .on("drag", dragmove);

function dragmove(d) {
  //check whether alt is pressed if not return
  if (!d3.event.sourceEvent.altKey)
    return;
  var x = d3.event.x;
  var y = d3.event.y;
  d3.select(this).attr("transform", "translate(" + x + "," + y + ")");
}

g.append("circle")
.attr("transform", "translate(100, 100)")
.attr("r",10)
//register drag to all circles.     
d3.selectAll("circle").call(drag);

工作代码 here

希望这对您有所帮助!