Programmatically Set Brushes

Programmatically create and set the brushable area for two brushes. Prevent more brushes from being added and prevent existing brushes from being removed by disabling their .overlay event listeners. Useful if you'd like to allow a user to select multiple date ranges.

Cues taken from Ludwig Schubert's block d3-multiple-brushes.

This brush snaps to ~~day~~ month boundaries. On release, the brush fires an end event, allowing a listener to modify the brush selection. Using brush.move to initiate a transition, the brush smoothly interpolates from the original selection to the rounded selection. Compare this approach to using immediate snapping while brushing.

forked from mbostock's block: Brush Snapping

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.axis--grid .domain {
  fill: #ddd;
  stroke: none;
}

.axis--x .domain,
.axis--grid .tick line {
  stroke: #fff;
}

.axis--grid .tick--minor line {
  stroke-opacity: .5;
}

</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var brushes = [];
  
var margin = {top: 200, right: 40, bottom: 200, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scaleTime()
    .domain([new Date(2011, 7, 1), new Date()])
    .rangeRound([0, width]);

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", "axis axis--grid")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
        .ticks(d3.timeMonth.every(2))
        .tickSize(-height)
        .tickFormat(function() { return null; }))
  .selectAll(".tick")
    .classed("tick--minor", function(d) { return d.getMonth(); });

svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x)
        .ticks(d3.timeYear.every(1))
        .tickPadding(0))
    .attr("text-anchor", null)
  .selectAll("text")
    .attr("x", 6);

var gBrushes = svg.append('g').attr('class', 'brushes');

// make a couple brushes
makeBrush();
makeBrush();
  
// bind each brush object from the brushes array, creating an empty selection
var brushSelection = gBrushes.selectAll('.brush').data(brushes, d => d.id);

// create the brushes individual svg groups, instantiate them, and set their initial date values
brushSelection
  .enter()
  .insert('g', '.brush')
  .attr('class', 'brush')
  .attr('id', d => `brush-${d.id}`)
  // eslint-disable-next-line
  .each(function(brushObj) {
    // this init's the brush
    brushObj.brush(d3.select(this));

// set some default values of the brushes
    if (brushObj.id === 0) {
      brushObj.brush.move(d3.select(this), [
        x(new Date(2015, 7, 1)),
        x(new Date(2016, 7, 1)),
      ]);
    } else {
      brushObj.brush.move(d3.select(this), [
        x(new Date(2012, 7, 1)),
        x(new Date(2013, 7, 1)),
      ]);
    }
  });
  
// remove pointer events on each brushes overlay, this prevents new brushes from being made
d3.selectAll('.overlay').style('pointer-events', 'none');
  
function makeBrush() {
  const brush = d3
    .brushX()
    .extent([[0, 0], [width, height]])
    .on('end', brushended);

brushes.push({ id: brushes.length, brush });

return brush;
}

function brushended() {
  if (!d3.event.sourceEvent) return; // Only transition after input.
  if (!d3.event.selection) return; // Ignore empty selections.
  var d0 = d3.event.selection.map(x.invert),
      d1 = d0.map(d3.timeMonth.round);

// If empty when rounded, use floor & ceil instead.
  if (d1[0] >= d1[1]) {
    d1[0] = d3.timeMonth.floor(d0[0]);
    d1[1] = d3.timeMonth.offset(d1[0]);
  }

d3.select(this).transition().call(d3.event.target.move, d1.map(x));
}

</script>

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