D3 Examples - Simple brush

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .brush {opacity:0.5}
  </style>
</head>
​
<body>
  <script>
​
var svg = d3.select("body").append("svg");
​
var data = d3.range(800).map(Math.random);
​
var margin = {
    top: 100,
    right: 50,
    bottom: 200,
    left: 50
};
​
width = 960 - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;
​
var x = d3.scale.linear().range([0, width]);
​
var brush = d3.svg.brush().x(x).extent([0.24, 0.5])
    .on("brush", brushmove)
​
function brushmove() {
    var s = brush.extent();
  
    svg.selectAll(".del").remove()
    svg.append("text")
        .attr("class", "del")
        .text(s[0] + ", " + s[1])
        .attr("x", 10)
        .attr("y", 10);
}
​
var svg = 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 brushg = svg.append("g").attr("class", "brush")
    .call(brush)
​
brushg.selectAll("rect").attr("height", height)
    
    
    
​
  </script>
  
  
</body>
​
    