107 строки
2.2 KiB
HTML
107 строки
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>Brush</title>
|
|
<script src="../../d3.js"></script>
|
|
<style>
|
|
|
|
svg {
|
|
font: 10px sans-serif;
|
|
}
|
|
|
|
circle {
|
|
-webkit-transition: fill-opacity 250ms linear;
|
|
}
|
|
|
|
.selecting circle {
|
|
fill-opacity: .2;
|
|
}
|
|
|
|
.selecting circle.selected {
|
|
stroke: #f00;
|
|
}
|
|
|
|
.resize path {
|
|
fill: #666;
|
|
fill-opacity: .8;
|
|
stroke: #000;
|
|
stroke-width: 1.5px;
|
|
}
|
|
|
|
.axis path, .axis line {
|
|
fill: none;
|
|
stroke: #000;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
.brush .extent {
|
|
fill-opacity: .125;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
|
|
</style>
|
|
<body>
|
|
<script>
|
|
|
|
|
|
var data = d3.range(800).map(Math.random);
|
|
|
|
var margin = {top: 4, right: 50, bottom: 20, left: 50},
|
|
width = 960 - margin.left - margin.right,
|
|
height = 120 - margin.top - margin.bottom;
|
|
|
|
var x = d3.scale.linear()
|
|
.range([0, width]);
|
|
|
|
var y = d3.random.normal(height / 2, height / 8);
|
|
|
|
var brush = d3.svg.brush().x(x)
|
|
.on("brushstart", brushstart)
|
|
.on("brush", brushmove)
|
|
.on("brushend", brushend);
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g")
|
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
svg.append("g")
|
|
.attr("class", "x axis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.svg.axis().scale(x).orient("bottom"));
|
|
|
|
var circle = svg.append("g").selectAll("circle")
|
|
.data(data)
|
|
.enter().append("circle")
|
|
.attr("transform", function(d) { return "translate(" + x(d) + "," + y() + ")"; })
|
|
.attr("r", 3.5);
|
|
|
|
var brushg = svg.append("g")
|
|
.attr("class", "brush")
|
|
.call(brush);
|
|
|
|
brushg.selectAll(".resize").append("path")
|
|
.attr("transform", "translate(0," + height / 2 + ")")
|
|
.attr("d", d3.svg.arc()
|
|
.outerRadius(height / 2)
|
|
.startAngle(0)
|
|
.endAngle(function(d, i) { return i ? -Math.PI : Math.PI; }));
|
|
|
|
brushg.selectAll("rect")
|
|
.attr("height", height);
|
|
|
|
function brushstart() {
|
|
svg.classed("selecting", true);
|
|
}
|
|
|
|
function brushmove() {
|
|
var s = brush.extent();
|
|
circle.classed("selected", function(d) { return s[0] <= d && d <= s[1]; });
|
|
}
|
|
|
|
function brushend() {
|
|
svg.classed("selecting", !d3.event.target.empty());
|
|
}
|
|
|
|
</script>
|