How to use the d3-brush.brushY function in d3-brush

//  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"];
		};

return function (axis, _selector) {
    var brushes = state.brushes,
        brushNodes = state.brushNodes;


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

    var brush = brushY().extent([[-15, 0], [15, brushRangeMax]]);
    var id = brushes[axis] ? brushes[axis].length : 0;
    var node = 'brush-' + Object.keys(config.dimensions).indexOf(axis) + '-' + id;

    if (brushes[axis]) {
      brushes[axis].push({
        id: id,
        brush: brush,
        node: node
      });
    } else {
      brushes[axis] = [{ id: id, brush: brush, node: node }];
    }

    if (brushNodes[axis]) {
      brushNodes[axis].push({ id: id, node: node });
    } else {

.extent([[rRange[0], 0], [rRange[1], columnHash[c].width]])
          .on("start", () => {
            this.brushStart(mappingFn(event.selection), c, brushData, columnHash[c])
          })
          .on("brush", () => {
            this.brush(mappingFn(event.selection), c, brushData, columnHash[c])
          })
          .on("end", () => {
            this.brushEnd(mappingFn(event.selection), c, brushData, columnHash[c])
          })
      } else {
        selectedExtent = interaction.extent[c]
          ? interaction.extent[c].map(d => rRange[1] - rScale(d)).reverse()
          : interaction.startEmpty ? null : rRange
        brushPosition = [columnHash[c].x, 0]
        semioticBrush = brushY()
        semioticBrush
          .extent([[0, rRange[0]], [columnHash[c].width, rRange[1]]])
          .on("start", () => {
            this.brushStart(mappingFn(event.selection), c, brushData, columnHash[c])
          })
          .on("brush", () => {
            this.brush(mappingFn(event.selection), c, brushData, columnHash[c])
          })
          .on("end", () => {
            this.brushEnd(mappingFn(event.selection), c, brushData, columnHash[c])
          })
      }

      return (

.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() {

if (actualBrush === "xBrush") {
      const castExtent = extent as number[]
      mappingFn = (d): null | Array =>
        !d ? null : [xScale.invert(d[0]), xScale.invert(d[1])]
      semioticBrush = brushX()
      selectedExtent = castExtent.map(d => xScale(d)) as number[]
      endMappingFn = mappingFn
    } else if (actualBrush === "yBrush") {
      const castExtent = extent as number[]

      mappingFn = (d): null | Array =>
        !d
          ? null
          : [yScale.invert(d[0]), yScale.invert(d[1])].sort((a, b) => a - b)
      semioticBrush = brushY()
      selectedExtent = castExtent.map(d => yScale(d)).sort((a, b) => a - b)
      endMappingFn = mappingFn
    } else {
      const castExtent = extent as number[][]
      if (
        castExtent.indexOf(undefined) !== -1 ||
        castExtent[0].indexOf(undefined) !== -1 ||
        castExtent[1].indexOf(undefined) !== -1
      ) {
        return

const brushFor = config => (axis, _selector) => {
  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]]);

  _brush
    .on('start', function() {
      if (event.sourceEvent !== null) {
        events.call('brushstart', pc, config.brushed);
        event.sourceEvent.stopPropagation();
      }
    })
    .on('brush', function() {
      brushUpdated(selected());
    })
    .on('end', function() {
      brushUpdated(selected());
      events.call('brushend', pc, __.brushed);
    });