D3 Examples - d3.keybinding

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    body {
        font:12px/20px 'Helvetica';
    }
    textarea, input {
        width:100%;
        height:20px;
        margin:0;
        padding:0;
    }
</style>
<body>
    <textarea>typing in a textarea does not trigger bindings</textarea>
    <input value='typing in an input does not trigger bindings' />
    <p>use arrow keys to navigate the circle</p>
    <pre>
    </pre>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="keybinding.js"></script>
<script>
var width = 950, height = 300;
var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
    .attr("transform", "translate(0,0)");
​
var point = [width/2, height/2];
var momentum = [0, 0];
​
var circle = svg.append("circle")
    .datum(point)
    .attr("r", 10);
​
function move(x, y) {
    return function(event) {
        event.preventDefault();
        momentum = [momentum[0] + x, momentum[1] + y];
    };
}
​
d3.select('body').call(d3.keybinding()
    .on('←', move(-2, 0))
    .on('↑', move(0, -2))
    .on('→', move(2, 0))
    .on('↓', move(0, 2)));
​
d3.timer(function() {
    point[0] = Math.min(width,  Math.max(0, momentum[0] + point[0]));
    point[1] = Math.min(height, Math.max(0, momentum[1] + point[1]));
    circle
        .datum(point)
        .attr('transform', function(d) { return 'translate(' + d + ')'; });
    momentum[0] *= 0.9;
    momentum[1] *= 0.9;
});
​
</script>
​
    