Where in the svg did user click simple by mpmckenna8

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see!
        var info = d3.select("body").append("div").html("<p> Click the rectagle to get the x, y coordinates of where on the svg you clicked </p>")

    
    var svg = d3.select("body").append("svg")
								        	.on('click', clicked)

    
    
    svg.append("rect")
      .attr({x: 100, y: 10, width: 700, height: 480})
      .style({ fill: "#a72d1a"})
      .transition().duration(3000).ease("bounce")
      .style({ fill: "#5db9e3"})    
    
    
    
    	function clicked(){
        var clickpos = d3.mouse(this)
        console.log("hey", clickpos)
        info
        	.text("You clicked at " + clickpos[0] + ", " + clickpos[1])
      }
    console.log("you are now rocking with d3", d3);
  </script>
</body>

readme.md

A simple axample of how to get the x, y coordinates on the svg during a click event using d3.


Note that this is useful sometimes but most of the time I probably shouldn't have to worry about the coordinates.