D3 Examples - mouse clicks

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    svg { background-color: "#800"; width: "100px"; height: "100px"}
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
$(function()  { 
    var svg = d3.select('body').append('svg');
​
    $("body").keypress((e) => { 
        if (e.which == 114) { rectCreate(); } // 'r' pressed
    });
​
    function rectCreate() {
        svg.on('mousedown', function() {
            console.log("starting rect");
        });
​
        svg.on('mousemove', function() {
            console.log("drawing rect");
        });  
        
    }
});
​
  </script>
</body>
​
    