D3/07-add-hover.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>Add hover</title>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<style type="text/css">

			.bar {
				fill: steelblue;
				stroke: none;
			}
			
			/* Add styling for highlighted bars */
			.highlight {
				fill: red;
			}

		</style>
	</head>
	<body>
		<script type="text/javascript">

			//Define our random-number generator function
			var _id_ = 0;
			function generate() {
				return {
					index: _id_++,
					value: 1000 * Math.random()
				};
			}

			//Generate random data to use for the chart
			var data = d3.range(100).map(generate);
			
			
			//Set variables for desired size of chart
			var w = 900,
				h = 100,
				bw = 9;


			//Define a scale for y axis values
			var yScale = d3.scaleLinear()
								 .domain([0, d3.max(data, function(d) { return d.value; })])
								 .range([0, 100]);


			//Select the <body> and create a new SVG element
			var svg = d3.select("body").append("svg")
						.attr("width", w)
						.attr("height", h);
			

			//Create a series of 'rect' elements within the SVG
			svg.selectAll("rect.bar")
				.data(data)
				.enter()
				.append("rect")
				.attr("class", "bar")
				.attr("x", function(d, i) {
					return i * bw;
				})
				.attr("width", bw - 1)
				.attr("y", function(d) {
					return h - yScale(d.value);
				})
				.attr("height", function(d) {
					return yScale(d.value);
				})
				//Add callbacks for mouse events!
				.on("mouseover", function(d) {
					//Within the context of the anonymous function here,
					//'this' refers to the current DOM element, meaning
					//whichever one is being moused-over right now.
					d3.select(this).classed("highlight", true);		//Add class "highlight"
				})
				.on("mouseout", function(d) {
					d3.select(this).classed("highlight", false);	//Remove class "highlight"
				});


		</script>
	</body>
</html>