91 строка
1.9 KiB
HTML
91 строка
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>Brush</title>
|
|
<script src="../../d3.js"></script>
|
|
<style>
|
|
|
|
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>
|
|
<body>
|
|
<script>
|
|
|
|
|
|
var data = d3.svg.symbolTypes;
|
|
|
|
var margin = {top: 10, right: 10, bottom: 20, left:10},
|
|
width = 960 - margin.right - margin.left,
|
|
height = 100 - margin.top - margin.bottom;
|
|
|
|
var x = d3.scale.ordinal()
|
|
.domain(data)
|
|
.rangePoints([0, width], 1);
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width", width + margin.right + margin.left)
|
|
.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 symbol = svg.append("g").selectAll("path")
|
|
.data(data)
|
|
.enter().append("path")
|
|
.attr("transform", function(d) { return "translate(" + x(d) + "," + (height / 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", height);
|
|
|
|
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>
|