index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="testingExitEnter.css">
<link href='//fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Mouse around the screen and see what you find... </h1>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="testingExitEnter.js"></script>
</body>
testingExitEnter.js
"use strict";
var svg = d3.select("body").append("svg")
.attr("width", 1000)
.attr("height", 400)
var data = d3.range(1, 30)
var colors = d3.scale.linear().domain([1, 15, 30]).range(["grey", "blue", "red"])
svg.on("mousemove", function(d) {
return update(d3.mouse(this)[0])
})
function update(x) {
var d = Math.ceil(x / 25);
var k = svg.selectAll("rect").data(data.slice(d - 1, d + 5), function(m) {
return m
})
k.attr("opacity", .5);
k.enter().append("rect")
.attr({
width: 25,
height: 100,
y: 62
})
.attr("x", function(d) {
return d * 25
})
.attr("fill", function(d) {
return colors(d)
})
.attr("stroke", "white");
k.exit().remove();
}