d3.behavior.drag + keydown事件

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

希望这有帮助！