xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Mouse Over and Out with Moving Infobox</title> <script type="text/javascript" src="https://d3js.org/d3.v3.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> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js