d3.behavior.drag + keydown event

Question

I'm trying to create a basic D3 component with different user interactions. For instance the drag'n drop behavior should be enabled only if the user press Alt + left mouse button + drag mouse.

How can this be achieved?

Answer 1

You can do something like this:

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);

Working code here

Hope this helps!