Click to Select All

By default, clicking and dragging outside the current brush selection drags a new selection. This brush has been modified such that this interaction instead selects everything.

forked from mbostock's block: Click to Select All

<!DOCTYPE html>
<style>

.selected {
  fill: red;
  stroke: brown;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var randomX = d3.randomUniform(0, 10),
    randomY = d3.randomNormal(0.5, 0.12),
    data = d3.range(800).map(function() { return [randomX(), randomY()]; });

var svg = d3.select("svg"),
    margin = {top: 194, right: 50, bottom: 214, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleLinear()
    .domain([0, 10])
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var brush = d3.brushX()
    .extent([[0, 0], [width, height]])
    .on("start brush", brushed);

var dot = g.append("g")
    .attr("fill-opacity", 0.2)
  .selectAll("circle")
  .data(data)
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + x(d[0]) + "," + y(d[1]) + ")"; })
    .attr("r", 3.5);

g.append("g")
    .call(brush)
    .call(brush.move, [3, 5].map(x))
  .selectAll(".overlay")
    .on("mousedown touchstart", beforebrushed, true);

g.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

function beforebrushed() {
  d3.event.stopImmediatePropagation();
  d3.select(this.parentNode).transition().call(brush.move, x.range());
}

function brushed() {
  var extent = d3.event.selection.map(x.invert, x);
  dot.classed("selected", function(d) { return extent[0] <= d[0] && d[0] <= extent[1]; });
}

</script>

https://d3js.org/d3.v4.min.js