Created
March 4, 2012 22:23
-
-
Save adamgreenhall/1975116 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<title>Brush</title> | |
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/af2af6ac9080529d102aacfa57807371fd983d2b/d3.v2.js"></script> | |
<style type="text/css"> | |
svg { | |
font: 10px sans-serif; | |
} | |
path { | |
-webkit-transition: fill-opacity 250ms linear; | |
} | |
.selecting path { | |
fill-opacity: .2; | |
} | |
.selecting path.selected { | |
stroke: #f00; | |
stroke-width: 2px; | |
} | |
.axis path, .axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.brush .extent { | |
stroke: #fff; | |
fill-opacity: .125; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var data = d3.svg.symbolTypes; | |
var m = [10, 10, 20, 10], | |
w = 960 - m[1] - m[3], | |
h = 100 - m[0] - m[2]; | |
var x = d3.scale.ordinal().domain(data).rangePoints([0, w], 1); | |
var svg = d3.select("body").append("svg") | |
.attr("width", w + m[1] + m[3]) | |
.attr("height", h + m[0] + m[2]) | |
.append("g") | |
.attr("transform", "translate(" + m[3] + "," + m[0] + ")"); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + h + ")") | |
.call(d3.svg.axis().scale(x).orient("bottom")); | |
var symbol = svg.append("g").selectAll("path") | |
.data(data) | |
.enter().append("path") | |
.attr("transform", function(d) { return "translate(" + x(d) + "," + (h / 2) + ")"; }) | |
.attr("d", d3.svg.symbol().type(String).size(200)); | |
svg.append("g") | |
.attr("class", "brush") | |
.call(d3.svg.brush().x(x) | |
.on("brushstart", brushstart) | |
.on("brush", brushmove) | |
.on("brushend", brushend)) | |
.selectAll("rect") | |
.attr("height", h); | |
function brushstart() { | |
svg.classed("selecting", true); | |
} | |
function brushmove() { | |
var s = d3.event.target.extent(); | |
symbol.classed("selected", function(d) { return s[0] <= (d = x(d)) && d <= s[1]; }); | |
} | |
function brushend() { | |
svg.classed("selecting", !d3.event.target.empty()); | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment