How to use the d3-scale.scaleTime function in d3-scale

let containerElement: d3Axis.AxisContainerElement;
const svg: SVGSVGElement = select('svg').node() !; // mock
const g: SVGGElement = select('g').node() !; // mock
const canvas: HTMLCanvasElement = select('canvas').node() !; // mock

containerElement = svg;
containerElement = g;
// containerElement = canvas; // fails, incompatible type

// --------------------------------------------------------------------------
// Test Axis Generators
// --------------------------------------------------------------------------

let topAxis: d3Axis.Axis = d3Axis.axisTop(scaleLinear());
let rightAxis: d3Axis.Axis = d3Axis.axisRight(scaleTime());
let bottomAxis: d3Axis.Axis = d3Axis.axisBottom(scaleOrdinal());
let leftAxis: d3Axis.Axis = d3Axis.axisLeft(scaleLinear());

// --------------------------------------------------------------------------
// Test Configure Axis
// --------------------------------------------------------------------------

// scale(...) ----------------------------------------------------------------

leftAxis = leftAxis.scale(scalePow());
const powerScale: ScalePower = leftAxis.scale>();
// powerScale = leftAxis.scale(); // fails, without casting as AxisScale is purposely  generic

bottomAxis = bottomAxis.scale(scaleOrdinal());
// bottomAxis = bottomAxis.scale(scalePow()) // fails, domain of scale incompatible with domain of axis

if (isNumericalType(type)) {
    const [min, max] = domain as number[];
    const span = max - min || 1; // avoid single-point scale
    return scaleLinear()
      .domain([min - span * domainMargin, max + span * domainMargin])
      .range(range) as Scale;
  } else if (type === ValueType.DATE) {
    const [min, max] = [new Date(domain[0]).getTime(), new Date(domain[1]).getTime()];
    const span = max - min || 1;
    // Use timestamp to ensure correctness of timescale. Using string values may cause unexpected behaviors:
    // scale.domain(['1970', '1980'])('1975') => .333
    // scale.domain([new Date('1970'), new Date('1980')])('1975') => 6.259254188471056e-9
    //   (also with new Date().getTime() / new Date().valueOf())
    // scale.domain([new Date('1970').toString(), new Date('1980').toString()])('1975') => NaN
    // When using ScaleTime, always pass a Date/timestamp for safety.
    return scaleTime()
      .domain([min - span * domainMargin, max + span * domainMargin])
      .range(range)
      .nice() as Scale;
  } else { // ordinal
    const ordinalOptions: OrdinalScaleOptions = options.ordinal || { type: OrdinalScaleType.POINT };
    let padding = .5;
    let paddingInner: number | undefined;
    let paddingOuter: number | undefined;
    if (options.ordinal) {
      padding = options.ordinal.padding || padding;
      paddingInner = options.ordinal.paddingInner;
      paddingOuter = options.ordinal.paddingOuter;
    }
    const stringDomain = domain.map(value => value.toString()) as string[];
    switch (ordinalOptions.type) {
      case OrdinalScaleType.ORDINAL:

updateChart (props) {
    const { top, bottom, right, left, innerLeft, innerRight } = this.margin
    const { width, height } = this.getSize()
    const { svg, dataCanvas } = this
    const { data, yDomain, xDomain, yLabel, interactionData: { hover, hoverDateValue } } = props

    // ---------------------------------------------------
    // Functions

    const x = scaleTime()
      .domain(xDomain)
      .range([0, width - innerLeft - innerRight])
    // Scale is needed for the mouseMove function.
    this.xScale = x

    const y = scaleLinear()
      .domain(yDomain)
      .range([height, 0])
    // Scale is needed for the mouseMove function.
    this.yScale = y

    // ---------------------------------------------------
    // Size updates
    svg
      .attr('width', width + left + right)
      .attr('height', height + top + bottom)

_createScaleAndZoom() {
        const { min, max } = this.state.overallTimeDomain;
        const { width, height } = this.state.histogramChartDimensions;

        this.densityChartXScale = scaleTime()
            .domain([ min, max ])
            .range([ 0, this.state.densityChartDimensions.width ]);

        // max zoom is the ratio of the initial domain extent to the minimum unit we want to zoom to.
        const MAX_ZOOM_VALUE = (max - min) / this.props.minZoomUnit;

        this.zoom = d3Zoom()
            .scaleExtent([MIN_ZOOM_VALUE, MAX_ZOOM_VALUE])
            .translateExtent([
                [0, 0],
                [width, height]
            ])
            .extent([
                [0, 0],
                [width, height]
            ])

it('renders time scale correctly', () => {
    const width = 900;
    const height = 360;
    const timeDomain = [new Date(2017, 0, 1), new Date(2017, 1, 1)];
    const xScale = scaleTime().domain(timeDomain).range([0, width]);
    const axis = render();
    const ticks = axis.find('.tick');
    expect(ticks).toMatchSnapshot();
  });

textAlign: 'center',
              }}
              role="img"
              aria-label={this.state.altText}
              tabIndex={0}
            >
               dateFromSlash(d[this.props.mainAxisDataKey])}
                yAccessor={d => +d.value}
                lineType="stackedarea"
                lineStyle={d => ({ fill: d.color })}
                margin={{
                  top: 40, right: 40, bottom: 60, left: 40,
                }}
                axes={[
                  {
                    orient: 'left',
                    className: 'semiotic-axis',
                  },
                  {
                    orient: 'bottom',
                    ticks: 20,
                    rotate: -45,

getLinearScale(domain, range, isTime = false) {
    return (isTime ? d3Scale.scaleTime() : d3Scale.scaleLinear()).domain(domain).range(range);
  }

private initChart(): void {
        this.svg = d3.select('svg');

        this.width = this.svg.attr('width') - this.margin.left - this.margin.right;
        this.height = this.svg.attr('height') - this.margin.top - this.margin.bottom;

        this.g = this.svg.append('g').attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

        this.x = d3Scale.scaleTime().range([0, this.width]);
        this.y = d3Scale.scaleLinear().range([this.height, 0]);
        this.z = d3Scale.scaleOrdinal(d3ScaleChromatic.schemeCategory10);

        this.line = d3Shape.line()
            .curve(d3Shape.curveBasis)
            .x( (d: any) => this.x(d.date) )
            .y( (d: any) => this.y(d.temperature) );

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

        this.y.domain([
            d3Array.min(TEMPERATURES, function(c) { return d3Array.min(c.values, function(d) { return d.temperature; }); }),
            d3Array.max(TEMPERATURES, function(c) { return d3Array.max(c.values, function(d) { return d.temperature; }); })
        ]);

        this.z.domain(TEMPERATURES.map(function(c) { return c.id; }));

private computeScale(range: [number, number], ticks: Date[]) {
    return scaleTime()
      .range(range)
      .domain([ticks[0], last(ticks)])
  }

getXScale(domain, width): any {
    let scale;

    if (this.scaleType === 'time') {
      scale = scaleTime();
    } else if (this.scaleType === 'linear') {
      scale = scaleLinear();
    } else if (this.scaleType === 'ordinal') {
      scale = scalePoint().padding(0.1);
    }

    scale.range([0, width]).domain(domain);

    return this.roundDomains ? scale.nice() : scale;
  }