How to use the d3.range function in d3

getLegendValuesAndText(rawValues, scaledValues) {
    let values = []
    let text = []

    // if it is integer scalars:
    if (allInts(scaledValues)) {
      const [min, max] = [d3.min(scaledValues), d3.max(scaledValues)]

      if (max - min <= 8) {
        values = d3.range(min, max + 1)
        text = values.slice(0)
      }
    }

    if (values.length == 0) {
      return this.makeBinnedLegend(scaledValues)
    }

    return {
      'values': values,
      'text': text,
    }
  }
}

addTextLine(range, color, ref_duration, root, delay) {
    if (!root) {
      root = this.svg;
    }
    let yrange = d3.range(range.y1, range.y2+1);
    // For each y, need two x-coords: start and end
    let xpairs = y => {
      let x1 = y === range.y1 ? range.x1 : 0;
      let x2 = y === range.y2 ? range.x2 : this.linewidth(y);
      // I have measured out my life in off-by-one errors.
      return [x1, x2+1];
    };
    let get_linedat = y => {
      let [x1, x2] = xpairs(y);
      return [ [x1, y], [x2, y] ];
    };
    let line = d3.line()
      .x( ([x,y]) => this.linex(y) + this.x.underline(x) )
      .y( ([x,y]) => this.y.text(y) );
    let paths = root.selectAll().data(yrange)
      .enter()

var d3 = require('d3');
var node = document.createElement('div');

 var n = 4, // number of layers
    m = 58, // number of samples per layer
    stack = d3.layout.stack(),
    layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),
    yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });

var margin = {top: 40, right: 10, bottom: 20, left: 10},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([0, width], .08);

var y = d3.scale.linear()
    .domain([0, yStackMax])
    .range([height, 0]);

var color = d3.scale.linear()

/*
            let totalWidth = maxX - minX;
            let totalHeight = maxY - minY;
            */

            var tileWidth = totalWidth /  Math.pow(2, zoomLevel);
            var tileHeight = totalHeight / Math.pow(2, zoomLevel);

            let epsilon = 0.000001;
            let tiles = [];

            let rows = d3.range(Math.floor((zoom.x().domain()[0] - minX) / tileWidth),
                                Math.ceil(((zoom.x().domain()[1] - minX) - epsilon) / tileWidth));

            let cols = d3.range(Math.floor((zoom.y().domain()[0] - minY) / tileHeight),
                                Math.ceil(((zoom.y().domain()[1] - minY) - epsilon) / tileHeight));


                            
            for (let i = 0; i < rows.length; i++) {
                for (let j = 0; j < cols.length; j++) {
                    tiles.push([zoomLevel, rows[i], cols[j]]);
                }
            }
            // hey hye
            /*
            let tiles = [];
            rows.forEach((r) => { tiles.push([zoomLevel, r]);});
            */
            refreshTiles(tiles);
        }

values.forEach((value: HistogramValue) => {
            numericalValues.push(value.value);
            sumFrequency += value.frequency;
        });

        const [min, max] = d3.extent(numericalValues);

        const binsCount: number =
            (settings.general.bins && settings.general.bins > HistogramGeneralSettings.MinNumberOfBins)
            ? settings.general.bins
            : d3.histogram()(numericalValues).length; // predict bins count for interval correction
        const interval: number = (max - min) / binsCount;

        bins = d3.histogram().thresholds(
            d3.range(min, max, interval)
        )(numericalValues);

        bins.forEach((bin: LayoutBin, index: number) => {
            let filteredValues: HistogramValue[],
                frequency: number;

            filteredValues = values.filter((value: HistogramValue) => {
                return Histogram.isValueContainedInRange(value, bin, index);
            });

            frequency = filteredValues.reduce((previousValue: number, currentValue: HistogramValue): number => {
                return previousValue + currentValue.frequency;
            }, 0);

            bin.y = settings.general.frequency
                ? frequency

_setupRanges: function () {
    var n = Math.round(this.chartWidth() / this.options.divisionWidth);
    this.verticalRange = d3.range(0, this.chartWidth() + this.chartWidth() / n, this.chartWidth() / n);
    this.horizontalRange = d3.range(0, this.chartHeight() + this.chartHeight() / 2, this.chartHeight() / 2);
  },

dadavis.utils.computeRandomTimeArray = function(count, dateNow) {
    var dayInMillis = 1e3 * 60 * 60 * 24;
    var dateNow = new Date().getTime() - count * dayInMillis;
    return d3.range(count || 0).map(function(d, i) {
        return dateNow + i * dayInMillis;
    });
};

function groupTicks(d, step) {
    var k = (d.endAngle - d.startAngle) / d.value;
    return d3.range(0, d.value, step).map(function(value) {
      return {
        value: value,
        angle: value * k + d.startAngle + (d.endAngle - d.startAngle) / 2
      };
    });
  }

}
            ];
    this.processLinks();
    this.svgElement = d3.select("svg");
    this.width = this.svgElement.attr('width');
    this.height = this.svgElement.attr('height');
    this.svgElement.style('cursor','move');
    this.svgElement.attr("width",this.width);
    this.svgElement.attr("height",this.height);
    this.g = this.svgElement.append("g");
    this.graphLinkGroup = this.g.append("g").attr("id", `links`).attr("class", "links");
    this.graphNodeGroup = this.g.append('g').attr("class",".nodes").attr("id","nodes");
      this.size = d3
      .scalePow()
      .exponent(1)
      .domain(d3.range(1));
    this.forceSimulation = d3
      .forceSimulation()
      .velocityDecay(0.2)
      .force('collision', d3.forceCollide().radius(function(d) {
        return 20;
      }))
      .force("charge_force",d3.forceManyBody().strength(-50000))
      .force("xPos", d3.forceX(this.width /2))
      .force("yPos", d3.forceY(this.height / 2));
    this.forceSimulation.nodes(this.nodes);
    this.forceSimulation.force("link", d3.forceLink().links(this.links).distance((d:any)=>{
      let distance = 150;
        return distance; 
     }).strength(0.1));
     this.forceSimulation.on("tick", () => {  
      this.tick();