sfrdmn · December 6, 2011 09:20 · toonv · Jul 20, 2013 · toonv · Jul 20, 2013
diff --git a/index.html b/index.html
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>Mouse Over and Out with Moving Infobox</title>
 		<script type="text/javascript" src="https://github.com/mbostock/d3/raw/fe671a70e236710412a514fa276e59f875f3c617/d3.js"></script>
 		<link type="text/css" rel="stylesheet" href="style.css">
 	</head>
 	<body>
 		<!-- I've only commented changes relevant to this mouse follow stuff -->
 		<!-- btw, this is what an html comment looks like -->
 		
 		<!-- here is our box which will move around. it is styled in the css/style.css file -->
 		<div class="infobox">
 			<p>Here is where we will say something.</p>
 		</div>

 		<script type="text/javascript">
 			var w = 800;
 			var h = 800;
 			var data = [];
 			for( var i = 0; i < 100; i++ ) {
 				data[i] = Math.floor(Math.random()*100);
 			}

 			// this will be ran whenever we mouse over a circle
 			var myMouseOverFunction = function() {
 				var circle = d3.select(this);
 				circle.attr("fill", "red" );

 				// show infobox div on mouseover.
 				// block means sorta "render on the page" whereas none would mean "don't render at all"
 				d3.select(".infobox").style("display", "block");	
 				// add test to p tag in infobox
 				d3.select("p").text("This circle has a radius of " + circle.attr("r") + " pixels.");
 			}

 			var myMouseOutFunction = function() {
 				var circle = d3.select(this);
 				circle.attr("fill", "steelblue" );
 				
 				// display none removes element totally, whereas visibilty in last example just hid it
 				d3.select(".infobox").style("display", "none");	
 			}

 			var myPositionFunction = function() {
 				return Math.random() * w;
 			}
 			
 			// this should be called when the mouse is moved
 			// we will attach it to our svg area so that it detects mouse movement on our entire visualization
 			// we are trying to get the infobox to move with the mouse
 			var myMouseMoveFunction = function() {
 				// save selection of infobox so that we can later change it's position
 				var infobox = d3.select(".infobox");
 				// this returns x,y coordinates of the mouse in relation to our svg canvas
 				var coord = d3.svg.mouse(this)
 				// now we just position the infobox roughly where our mouse is
 				infobox.style("left", coord[0] + 15  + "px" );
 				infobox.style("top", coord[1] + "px");
 			}
 			
 			var chart = d3.select("body")
 				.append("svg:svg")
 				.attr("width", w)
 				.attr("height", h)
 				.on('mousemove', myMouseMoveFunction); // here we attach our function which updates info box position
 				// we attach it here, because we want it to work everywhere on our graphic
 			
 			chart.selectAll("circle").data(data) 		

 				.enter().append("svg:circle") 

 				.attr("cx", myPositionFunction) 	

 				.attr("cy", myPositionFunction) 	

 				.attr("r", function(d) {		
 					return d;
 				})		

 				.attr("fill", "steelblue")

 				.on("mouseover", myMouseOverFunction)

 				.on("mouseout", myMouseOutFunction);  	
 		</script>
 	</body>
 </html>
diff --git a/style.css b/style.css
 html, body {
        margin: 0;
 }

 .infobox {
        position: absolute;
        width: 200px;
        padding: 10px;
        background-color: rgba(255,255,255,.75);
 }

 p {
        margin: 0;
 }
 ~
	<html>
	<head>
	<meta charset="utf-8">
	<title>Mouse Over and Out with Moving Infobox</title>
	<script type="text/javascript" src="https://github.com/mbostock/d3/raw/fe671a70e236710412a514fa276e59f875f3c617/d3.js"></script>
	<link type="text/css" rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- I've only commented changes relevant to this mouse follow stuff -->
	<!-- btw, this is what an html comment looks like -->

	<!-- here is our box which will move around. it is styled in the css/style.css file -->
	<div class="infobox">
	<p>Here is where we will say something.</p>
	</div>

	<script type="text/javascript">
	var w = 800;
	var h = 800;
	var data = [];
	for( var i = 0; i < 100; i++ ) {
	data[i] = Math.floor(Math.random()*100);
	}

	// this will be ran whenever we mouse over a circle
	var myMouseOverFunction = function() {
	var circle = d3.select(this);
	circle.attr("fill", "red" );

	// show infobox div on mouseover.
	// block means sorta "render on the page" whereas none would mean "don't render at all"
	d3.select(".infobox").style("display", "block");
	// add test to p tag in infobox
	d3.select("p").text("This circle has a radius of " + circle.attr("r") + " pixels.");
	}

	var myMouseOutFunction = function() {
	var circle = d3.select(this);
	circle.attr("fill", "steelblue" );

	// display none removes element totally, whereas visibilty in last example just hid it
	d3.select(".infobox").style("display", "none");
	}

	var myPositionFunction = function() {
	return Math.random() * w;
	}

	// this should be called when the mouse is moved
	// we will attach it to our svg area so that it detects mouse movement on our entire visualization
	// we are trying to get the infobox to move with the mouse
	var myMouseMoveFunction = function() {
	// save selection of infobox so that we can later change it's position
	var infobox = d3.select(".infobox");
	// this returns x,y coordinates of the mouse in relation to our svg canvas
	var coord = d3.svg.mouse(this)
	// now we just position the infobox roughly where our mouse is
	infobox.style("left", coord[0] + 15 + "px" );
	infobox.style("top", coord[1] + "px");
	}

	var chart = d3.select("body")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.on('mousemove', myMouseMoveFunction); // here we attach our function which updates info box position
	// we attach it here, because we want it to work everywhere on our graphic

	chart.selectAll("circle").data(data)

	.enter().append("svg:circle")

	.attr("cx", myPositionFunction)

	.attr("cy", myPositionFunction)

	.attr("r", function(d) {
	return d;
	})

	.attr("fill", "steelblue")

	.on("mouseover", myMouseOverFunction)

	.on("mouseout", myMouseOutFunction);
	</script>
	</body>
	</html>
	html, body {
	margin: 0;
	}

	.infobox {
	position: absolute;
	width: 200px;
	padding: 10px;
	background-color: rgba(255,255,255,.75);
	}

	p {
	margin: 0;
	}
	~