dvreed77
10/24/2013 - 10:43 PM

Register mouse events on screen

Register mouse events on screen

<!DOCTYPE html>
<meta charset="utf-8">
<style>
	.overlay {
		fill-opacity: 0.1;
	}
	circle {
		fill: black;
	}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 10, bottom:10, left: 10, right: 10},
width = 300,
height = 300;

var svg = d3.select("body")
.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom);

var g = svg.append("g")
.attr("transform", "translate{" + margin.left + "," + margin.top + ")");

var data = [];

var x = d3.scale.linear()
.range([0, width])
.domain([0, 1]);

var y = d3.scale.linear()
.range([height, 0])
.domain([0, 1]);

var overlay = g.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("click", function(d) {
	console.log("click", x.invert(d3.mouse(this)[0]));
	data.push({x: x.invert(d3.mouse(this)[0]), y: y.invert(d3.mouse(this)[1])});
	update();
});

function update() {
	var pts = g.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return x(d.x); })
	.attr("cy", function(d) { return y(d.y); })
	.attr("r", 3);
}

</script>
</body>