How to use the d3-array.bisector function in d3-array

num = d3Array.bisect(['0', '2', '3', '4', '7', '8'], '21');
num = d3Array.bisect(['0', '2', '3', '4', '7', '8'], '21', 1);
num = d3Array.bisect(['0', '2', '3', '4', '7', '8'], '21', 1, 4);

num = d3Array.bisect([new Date(2010, 1, 1), new Date(2011, 1, 1), new Date(2012, 1, 1), new Date(2013, 1, 1)], new Date(2011, 2, 1));
num = d3Array.bisect([new Date(2010, 1, 1), new Date(2011, 1, 1), new Date(2012, 1, 1), new Date(2013, 1, 1)], new Date(2011, 2, 1), 1);
num = d3Array.bisect([new Date(2010, 1, 1), new Date(2011, 1, 1), new Date(2012, 1, 1), new Date(2013, 1, 1)], new Date(2011, 2, 1), 1, 2);

// bisector() ------------------------------------------------------------------

mixedObjectArray.sort((a, b) => a.date.valueOf() - b.date.valueOf());

let mixedObjectDateBisectorObject: d3Array.Bisector;

// define using accessor
mixedObjectDateBisectorObject = d3Array.bisector(el => el.date);

// define using comparator
mixedObjectDateBisectorObject = d3Array.bisector((el, x) =>
    el.date.valueOf() - x.valueOf());

// bisect left
num = mixedObjectDateBisectorObject.left(mixedObjectArray, new Date(2015, 3, 14));
num = mixedObjectDateBisectorObject.left(mixedObjectArray, new Date(2015, 3, 14), 1);
num = mixedObjectDateBisectorObject.left(mixedObjectArray, new Date(2015, 3, 14), 3, 4);

// bisect right
num = mixedObjectDateBisectorObject.right(mixedObjectArray, new Date(2015, 3, 14));
num = mixedObjectDateBisectorObject.right(mixedObjectArray, new Date(2015, 3, 14), 1);
num = mixedObjectDateBisectorObject.right(mixedObjectArray, new Date(2015, 3, 14), 3, 4);

// ascending() -----------------------------------------------------------------

data,
  parentWidth = 600,
  parentHeight = 400,
  margin = {},
  tooltipData,
  tooltipLeft,
  tooltipTop,
  showTooltip,
  hideTooltip
}) => {
  const width = parentWidth - margin.left - margin.right
  const height = parentHeight - margin.top - margin.bottom

  const x = d => new Date(d.time)
  const y = d => d.price
  const bisectDate = bisector(d => x(d)).left

  const defaultPoint = { price: 0, time: new Date().getTime() }

  const firstPoint = data.length ? data[0] : defaultPoint
  const currentPoint = data.length ? data[data.length - 1] : defaultPoint
  const minPrice = Math.min(...data.map(y))
  const maxPrice = Math.max(...data.map(y))
  // const firstPrice = y(firstPoint);
  // const currentPrice = y(currentPoint);
  const maxData = [
    { time: x(firstPoint), price: maxPrice },
    { time: x(currentPoint), price: maxPrice }
  ]
  const minData = [
    { time: x(firstPoint), price: minPrice },
    { time: x(currentPoint), price: minPrice }

const self = this;
    const numOfLines = this.graphLinesData.length - 1;

    this.legendHover = this.graphLinesData.map((eachLine) => {
      return eachLine.values;
    });

    this.searchAnObjectFromArray = (key, value, array) => {
      const obj = array.filter((objs) => {
        return objs[key] === value;
      })[0];

      return obj;
    };

    this.bisectDate = d3Array.bisector(d => d[`date`]).left;

    if (this.firstMouseMove > 0) {
      this.focus
        .append('rect')
        .attr('class', 'hover rectCoverDate')
        .attr('fill', '#fff')
        .attr('fill-opacity', '0.7')
        .attr('height', '30px')
        .attr('width', '48px')
        .attr('display', 'none')
        .attr('text-align', 'middle')
        .attr('rx', 3)
        .attr('ry', 3)
        .attr('x', 15)
        .attr('y', -7);

updateTooltipPos = (xPos: number) => {
    const firstSerie = this.props.series[0];
    if (this.state.mouseOver && firstSerie) {
      const { updateTooltip } = this.props;
      const date = this.state.xScale.invert(xPos);
      const bisectX = bisector(d => d.x).right;
      let idx = bisectX(firstSerie.data, date);
      if (idx >= 0) {
        const previousPoint = firstSerie.data[idx - 1];
        const nextPoint = firstSerie.data[idx];
        if (
          !nextPoint ||
          (previousPoint &&
            date.valueOf() - previousPoint.x.valueOf() <= nextPoint.x.valueOf() - date.valueOf())
        ) {
          idx--;
        }
        const selectedDate = firstSerie.data[idx].x;
        const xPos = this.state.xScale(selectedDate);
        this.setState({ selectedDate, selectedDateXPos: xPos, selectedDateIdx: idx });
        if (updateTooltip) {
          updateTooltip(selectedDate, xPos, idx);

export function collapseTopology(topology, numPieces: number) {
  const geometries = topology.objects.triangles.geometries;
  const bisect = bisector(d => d.area).left;

  while (geometries.length > numPieces) {
    mergeSmallestFeature();
  }

  if (numPieces > geometries.length) {
    throw new RangeError("Can't collapse topology into " + numPieces + ' pieces.');
  }

  return feature(topology, topology.objects.triangles).features.map(f => {
    f.geometry.coordinates[0].pop();
    return f.geometry.coordinates[0];
  });

  function mergeSmallestFeature() {
    const smallest = geometries[0],

.attr("d", d0)
      .attr("cx", (d) => this.x(d.date))
      .attr("cy", (d) => this.y(d.value))
      .on("mouseover", function() { 
        self.svg.select(".tool-tip").style("display", null);
        var cy = 204 - d3.select(this).attr("cy");
        var cx = d3.select(this).attr("cx");
        localStorage.setItem('cy', JSON.stringify({ cy: cy }));
        localStorage.setItem('cx', JSON.stringify({ cx: cx }));
      })
      .on("mouseout", function() { 
        self.svg.select(".tool-tip").style("display", "none");
      })
      .on("mousemove", mousemove)
      
    var bisectDate = d3Array.bisector(function(d) { return d.hour; }).left;

    var range =  this.graphData.xAxis.range;
    var self = this;

    var timeFormat = {
      '1 day' : '%b %d, %I:%M %p',
      'day' : '%b %d, %I:%M %p',
      '7 days' : '%b %d, %I:%M %p',
      'week':'%b %d, %I %p',
      '4 weeks' : '%b %d, %I %p',
      'month' : '%b %d %Y',
      '6 months' : '%b %d %y',
      '6months' : '%b %d %y',
      'year' : '%b %d %Y',
      '1 year' : '%b %y',
      '6 years' : '%Y'

constructor(chromInfo) {
    this.chromInfo = chromInfo;
    this.chromInfoBisector = bisector(d => d.pos).left;
  }

my.x = function(_) {
    if (arguments.length) {
      x = _;
      bisectorX = bisector(x).right;
      return my;
    }
    return x;
  };

import { InfraLogEntryFields } from '../../graphql/types';

export type LogEntry = InfraLogEntryFields.Fragment;

export type LogEntryColumn = InfraLogEntryFields.Columns;
export type LogEntryMessageColumn = InfraLogEntryFields.InfraLogEntryMessageColumnInlineFragment;
export type LogEntryTimestampColumn = InfraLogEntryFields.InfraLogEntryTimestampColumnInlineFragment;
export type LogEntryFieldColumn = InfraLogEntryFields.InfraLogEntryFieldColumnInlineFragment;

export type LogEntryMessageSegment = InfraLogEntryFields.Message;
export type LogEntryConstantMessageSegment = InfraLogEntryFields.InfraLogMessageConstantSegmentInlineFragment;
export type LogEntryFieldMessageSegment = InfraLogEntryFields.InfraLogMessageFieldSegmentInlineFragment;

export const getLogEntryKey = (entry: LogEntry) => entry.key;

const logEntryTimeBisector = bisector(compareToTimeKey(getLogEntryKey));

export const getLogEntryIndexBeforeTime = logEntryTimeBisector.left;
export const getLogEntryIndexAfterTime = logEntryTimeBisector.right;
export const getLogEntryIndexAtTime = getIndexAtTimeKey(getLogEntryKey);

export const getLogEntryAtTime = (entries: LogEntry[], time: TimeKey) => {
  const entryIndex = getLogEntryIndexAtTime(entries, time);

  return entryIndex !== null ? entries[entryIndex] : null;
};

export const isTimestampColumn = (column: LogEntryColumn): column is LogEntryTimestampColumn =>
  column != null && 'timestamp' in column;

export const isMessageColumn = (column: LogEntryColumn): column is LogEntryMessageColumn =>
  column != null && 'message' in column;