How to use d3-brush - 10 common examples

var convertBrushArguments = function convertBrushArguments(args) {
      var args_array = Array.prototype.slice.call(args);
      var axis = args_array[0];
      // ordinal scales do not have invert
      var yscale = config.dimensions[axis].yscale;

      var raw = brushSelection(args_array[2][0]) || [];
      var scaled = invertByScale(raw, yscale);

      return {
        axis: args_array[0],
        node: args_array[2][0],
        selection: {
          raw: raw,
          scaled: scaled
        }
      };
    };

.on('end', function() {
      // Figure out if our latest brush has a selection
      const lastBrushID = brushes[axis][brushes[axis].length - 1].id;
      const lastBrush = document.getElementById(
        'brush-' +
          Object.keys(config.dimensions).indexOf(axis) +
          '-' +
          lastBrushID
      );
      const selection = brushSelection(lastBrush);

      // If it does, that means we need another one
      if (selection && selection[0] !== selection[1]) {
        newBrush(state, config, pc, events, brushGroup)(axis, _selector);
      }

      // Always draw brushes
      drawBrushes(brushes[axis], config, pc, axis, _selector);

      brushUpdated(
        config,
        pc,
        events
      )(selected(state, config, pc, events, brushGroup));
      events.call('brushend', pc, config.brushed);
    });

// to make a dummy selection element
                if (event.sourceEvent.ctrlKey) {
                  let html = select(this)
                    .select('.selection')
                    .nodes()[0].outerHTML;
                  html = html.replace(
                    'class="selection"',
                    'class="selection dummy' +
                      ' selection-' +
                      config.brushes.length +
                      '"'
                  );
                  let dat = select(this).nodes()[0].__data__;
                  let brush = {
                    id: config.brushes.length,
                    extent: brushSelection(this),
                    html: html,
                    data: dat,
                  };
                  config.brushes.push(brush);
                  select(select(this).nodes()[0].parentNode)
                    .select('.axis')
                    .nodes()[0].outerHTML += html;
                  pc.brush();
                  config.dimensions[d].brush.move(select(this, null));
                  select(this)
                    .select('.selection')
                    .attr('style', 'display:none');
                  pc.brushable();
                } else {
                  pc.brush();
                }

const getBrushSelection = ctx => {
	let selection = null;
	const event = d3Event;
	const main = ctx.context || ctx.main;

	// check from event
	if (event && event.constructor.name === "BrushEvent") {
		selection = event.selection;
	// check from brush area selection
	} else if (main && (selection = main.select(`.${CLASS.brush}`).node())) {
		selection = d3BrushSelection(selection);
	}

	return selection;
};

componentDidMount() {
    // We want the React app to respond to brush state and vice-versa
    // but d3-brush fires the same events for both user-initiated brushing
    // and programmatic brushing (brush.move). We need these flags to
    // distinguish between the uses.
    //
    // We don't use state because that would trigger another `componentDidUpdate`

    this.brushing = false;
    this.moving = false;

    this.root = select(this.rootContainer.current);
    this.brush = brushX()
      .on('start', () => {
        this.brushing = true;
      })
      .on('brush', () => {
        if (this.moving) {
          return;
        }
        event.selection === null ? this._reset() : this._brush(event.selection);
      })
      .on('end', () => {
        if (!this.moving && event.selection === null) {
          this._reset();
        }

        this.brushing = false;
        this.moving = false;

// To get the starting and ending dates within which data value is > 0
    this.getDataRangePoints();

    // this.x.domain(d3Array.extent(this.data, (d: Date) => d ));

    this.x.domain([this.dataStartDate, this.dataEndDate]);
    // Note : You can add '.nice()' function at the end of this.x.domain() to have evenly spaced ticks with starting and
    //        ending point included

    // this.x2.domain(d3Array.extent(this.data, (d: Date) => d ));

    this.x2.domain([this.dataStartDate, this.dataEndDate]);
    // Note : You can add '.nice()' function at the end of this.x.domain() to have evenly spaced ticks with starting and
    //        ending point included

    this.brush = d3Brush
      .brushX()
      .extent([[0, 0], [this.timeLineWidth, this.height2 / 2]])
      .on('brush end', this.brushed.bind(this));

    this.brush2 = d3Brush
      .brushX()
      .extent([[0, 0], [this.width, this.height]])
      .on('brush end', this.areaHighlighter.bind(this));

    this.zoom = d3Zoom
      .zoom()
      .scaleExtent([1, Infinity])
      .translateExtent([[0, 0], [this.width, this.height]])
      .extent([[0, 0], [this.width, this.height]])
      .on('zoom', this.zoomed.bind(this));

//  no point in drawing the colorbar if it's not going to be visible
    if (this.colorbarHeight < 0) return;

    const colorbarAreaWidth = (
      COLORBAR_WIDTH +
      COLORBAR_LABELS_WIDTH +
      COLORBAR_MARGIN +
      BRUSH_COLORBAR_GAP +
      BRUSH_WIDTH +
      BRUSH_MARGIN
    );

    const axisValueScale = this.valueScale.copy()
      .range([this.colorbarHeight, 0]);

    this.scaleBrush = brushY();

    // this is to make the handles of the scale brush stick out away
    // from the colorbar
    if (
      this.options.colorbarPosition === 'topLeft' ||
      this.options.colorbarPosition === 'bottomLeft'
    ) {
      this.scaleBrush.extent(
        [
          [BRUSH_MARGIN, 0],
          [BRUSH_WIDTH, this.colorbarHeight],
        ],
      );
    } else {
      this.scaleBrush.extent(
        [

g.append('svg:g').attr('class', 'brush').each(function (d) {
      if (config.dimensions[d] !== undefined) {
        config.dimensions[d]['brush'] = brushY(select(this)).extent([[-15, 0], [15, config.dimensions[d].yscale.range()[0]]]);
        select(this).call(config.dimensions[d]['brush'].on('start', function () {
          if (event.sourceEvent !== null && !event.sourceEvent.ctrlKey) {
            pc.brushReset();
          }
        }).on('brush', function () {
          if (!event.sourceEvent.ctrlKey) {
            pc.brush();
          }
        }).on('end', function () {
          // save brush selection is ctrl key is held
          // store important brush information and
          // the html element of the selection,
          // to make a dummy selection element
          if (event.sourceEvent.ctrlKey) {
            var html = select(this).select('.selection').nodes()[0].outerHTML;
            html = html.replace('class="selection"', 'class="selection dummy' + ' selection-' + config.brushes.length + '"');

axis,
  _selector
) => {
  // handle hidden axes which will not be a property of dimensions
  if (!config.dimensions.hasOwnProperty(axis)) {
    return () => {};
  }

  const brushRangeMax =
    config.dimensions[axis].type === 'string'
      ? config.dimensions[axis].yscale.range()[
          config.dimensions[axis].yscale.range().length - 1
        ]
      : config.dimensions[axis].yscale.range()[0];

  const _brush = brushY(_selector).extent([[-15, 0], [15, brushRangeMax]]);

  const convertBrushArguments = args => {
    const args_array = Array.prototype.slice.call(args);
    const axis = args_array[0];

    const raw = brushSelection(args_array[2][0]) || [];

    // handle hidden axes which will not have a yscale
    let yscale = null;
    if (config.dimensions.hasOwnProperty(axis)) {
      yscale = config.dimensions[axis].yscale;
    }

    // ordinal scales do not have invert
    const scaled = invertByScale(raw, yscale);

initBrush() {
		const $$ = this;
		const config = $$.config;
		const isRotated = config.axis_rotated;

		// set the brush
		$$.brush = isRotated ? d3BrushY() : d3BrushX();

		// set "brush" event
		const brushHandler = () => {
			$$.redrawForBrush();
		};
		const getBrushSize = () => {
			const brush = $$.svg.select(`.${CLASS.brush} .overlay`);
			const brushSize = {width: 0, height: 0};

			if (brush.size()) {
				brushSize.width = +brush.attr("width");
				brushSize.height = +brush.attr("height");
			}

			return brushSize[isRotated ? "width" : "height"];
		};