TypeScript d3-scale.scaleTime函数代码示例

	constructor( svg: Selection<BaseType, {}, HTMLElement, any>, dataLength: number) {
		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement

		const width = div.clientWidth
		const height = div.clientHeight

		const x = scaleTime().range([0, width])
		const y = scaleLinear().range([height, 0])

		const minModelX = Date.now()

		const idxToTime = (idx: number) => minModelX + idx * 86400 * 1000
		const xAxis = new MyAxis(Orientation.Bottom, x)
			.ticks(4)
			.setTickSize(height)
			.setTickPadding(8 - height)
			.setScale(x)

		const yAxis = new MyAxis(Orientation.Right, y)
			.ticks(4)
			.setTickSize(width)
			.setTickPadding(2 - width)
			.setScale(y)

		const gX = svg.append('g')
			.attr('class', 'axis')
			.call(xAxis.axis.bind(xAxis))

		const gY = svg.append('g')
			.attr('class', 'axis')
			.call(yAxis.axis.bind(yAxis))

		animateBench((elapsed: number) => {
			const minY = -5
			const maxY = 83
			const minX = animateCosDown(dataLength / 2, 0, elapsed)
			const maxX = minX + dataLength / 2

			x.domain([minX, maxX].map(idxToTime))
			y.domain([minY, maxY])

			xAxis.axisUp(gX)
			yAxis.axisUp(gY)
		})
	}

export function getScale(domain, range: number[], scaleType, roundDomains): any {
  let scale: any;

  if (scaleType === 'time') {
    scale = scaleTime()
      .range(range)
      .domain(domain);
  } else if (scaleType === 'linear') {
    scale = scaleLinear()
      .range(range)
      .domain(domain);

    if (roundDomains) {
      scale = scale.nice();
    }
  } else if (scaleType === 'ordinal') {
    scale = scalePoint()
      .range([range[0], range[1]])
      .domain(domain);
  }

  return scale;
}

// transpose() -----------------------------------------------------------------

testArrays = d3Array.transpose([testArray1, testArray2]);
testArrays = d3Array.transpose([readonlyTestArray1, readonlyTestArray2] as ReadonlyArray<ReadonlyArray<MixedObject>>);

// zip() -----------------------------------------------------------------------

testArrays = d3Array.zip(testArray1, testArray2);
testArrays = d3Array.zip(readonlyTestArray1, readonlyTestArray2);

// -----------------------------------------------------------------------------
// Test Histogram
// -----------------------------------------------------------------------------

const timeScale = scaleTime();

// Create histogram generator ==================================================

// number - number
let histoNumber_Number: d3Array.HistogramGeneratorNumber<number, number>;
histoNumber_Number = d3Array.histogram();
histoNumber_Number = d3Array.histogram<number, number>();

// MixedObject - number | undefined
let histoMixed_NumberOrUndefined: d3Array.HistogramGeneratorNumber<MixedObject, number | undefined>;
histoMixed_NumberOrUndefined = d3Array.histogram<MixedObject, number | undefined>();

// MixedObject | undefined - number | undefined
let histoMixedOrUndefined_NumberOrUndefined: d3Array.HistogramGeneratorNumber<MixedObject | undefined, number | undefined>;
histoMixedOrUndefined_NumberOrUndefined = d3Array.histogram<MixedObject | undefined, number | undefined>();

        new MixedObject(20, new Date(2016, 7, 30)),
        new MixedObject(30, new Date(2015, 3, 15)),
        new MixedObject(40, new Date(2014, 3, 15)),
        new MixedObject(50, new Date(2017, 4, 15))
    ],
    [
        new MixedObject(40, new Date(2016, 3, 1)),
        new MixedObject(50, new Date(2016, 9, 30)),
    ]
);

// -----------------------------------------------------------------------------
// Test Histogram
// -----------------------------------------------------------------------------

const tScale = scaleTime();

// Create histogram generator ==================================================

let defaultHistogram: d3Array.HistogramGenerator<number, number>;
defaultHistogram = d3Array.histogram();

let testHistogram: d3Array.HistogramGenerator<MixedObject, Date>;
testHistogram = d3Array.histogram<MixedObject, Date>();

// Configure histogram generator ===============================================

// value(...) ------------------------------------------------------------------

testHistogram = testHistogram.value((d, i, data) => {
    const datum: MixedObject = d; // d is of type MixedObject

 private static getXScale(width: number): ScaleTime<number, number> {
   let endDate: Date = CsiGraphCalculator.dayStart(new Date(Date.now()));
   const startDate: Date = new Date(endDate.getTime() - DATE_RANGE);
   return scaleTime().domain([startDate, endDate]).range([0, width]);
 }

// --------------------------------------------------------------------------
// Preparatory Steps
// --------------------------------------------------------------------------

let num: number;

let axisScaleNumber: d3Axis.AxisScale<number>;
let axisScaleDate: d3Axis.AxisScale<Date>;
let axisScaleString: d3Axis.AxisScale<string>;

// --------------------------------------------------------------------------
// Test AxisScale Helper Interface
// --------------------------------------------------------------------------

axisScaleNumber = scaleLinear();
axisScaleDate = scaleTime();
axisScaleString = scaleOrdinal<number>();
axisScaleNumber = scaleBand<number>();
axisScaleNumber = scalePoint<number>();
axisScaleString = scaleBand();
axisScaleString = scalePoint();
// --------------------------------------------------------------------------
// Test AxisContainerElement
// --------------------------------------------------------------------------

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

containerElement = svg;

	private drawChart(svg: Selection<BaseType, {}, HTMLElement, any>, data: Array<[number, number]>) {
		this.data = data

		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement

		const width = div.clientWidth
		const height = div.clientHeight

		svg.attr('width', width)
		svg.attr('height', height)

		// это просто извращённый способ добавить
		// в группу два элемента <g>
		// .enter() это часть фреймворка d3 для работы
		// с обновлениями, но мы пока игнорируем и
		// делаем обновления руками
		const views = svg
			.selectAll('g')
			.data([0, 1])
			.enter()
				.append('g')
				.attr('class', 'view')
		const [viewNy, viewSf] = views.nodes() as SVGGElement[]

		const path = views.append('path')

		// тут наши перевернутые базисы которые мы
		// cтеснительно запрятали в onViewPortResize
		// таки вылезли

		// на видимую область можно смотреть абстрактно
		// как на отдельное пространство

		// ось Y перевернута - что выглядит на языке
		// базисов как перевернутый базис
		//
		// а на языке векторов как разность точек, которая
		// у X положительна а у Y отрицательна
		// ну и наоборот если перевернем первый базис
		// то второй тоже перевернется но переворачивание
		// по-прежнему выглядит как умножение разности на -1
		//	
		// короче неважно какой из них считать первичным
		// в любом случае один перевернут по отношению к другому
		const bScreenXVisible = new AR1Basis(0, width)
		const bScreenYVisible = new AR1Basis(height, 0)

		// интерфейс с лигаси-кодом. Некоторая многословость простительна
		const x = scaleTime().range(bScreenXVisible.toArr())
		const yNy = scaleLinear().range(bScreenYVisible.toArr())
		const ySf = scaleLinear().range(bScreenYVisible.toArr())

		const pathTransformNy = new MyTransform(svg.node() as SVGSVGElement, viewNy)
		const pathTransformSf = new MyTransform(svg.node() as SVGSVGElement, viewSf)

		const updateScaleX = (bIndexVisible: AR1Basis) => {
			const bTimeVisible = bIndexVisible.transformWith(this.idxToTime)
			x.domain(bTimeVisible.toArr())
		}

		// bIndexVisible is the visible ends of model
		// affine space at chart edges.
		// They are updated by zoom and pan or animation
		// but unaffected by arrival of new data
		const updateScaleY = (bIndexVisible: AR1Basis, tree: SegmentTree, pathTransform: MyTransform, yScale: any) => {
			// рассчитается деревом отрезков, но все равно долго
			// так что нужно сохранить чтобы
			// два раза не перевычислять для линий графиков и для осей
			const bTemperatureVisible = this.bTemperatureVisible(bIndexVisible, tree)
			// референсное окно имеет достаточно странный вид
			// по горизонтали у нас полный диапазон
			// а по вертикали только видимый
			// надеюсь это исправится при переходе от отдельных
			// пространств по Х и Y к единому пространству
			// являющeмся их прямым произведением
			pathTransform.onReferenceViewWindowResize(this.bIndexFull, bTemperatureVisible)

			yScale.domain(bTemperatureVisible.toArr())
		}

		this.treeNy = new SegmentTree(this.data, this.data.length, this.buildSegmentTreeTupleNy)
		this.treeSf = new SegmentTree(this.data, this.data.length, this.buildSegmentTreeTupleSf)

		// в референсном окне видны все данные, поэтому
		// передаем bIndexFull в качестее bIndexVisible
		updateScaleX(this.bIndexFull)
		updateScaleY(this.bIndexFull, this.treeNy, pathTransformNy, yNy)
		updateScaleY(this.bIndexFull, this.treeSf, pathTransformSf, ySf)

		const xAxis = new MyAxis(Orientation.Bottom, x)
			.ticks(4)
			// изменять размер тиков надо при изменении
			// размеров окна
			.setTickSize(height)
			.setTickPadding(8 - height)

		const yAxis = new MyAxis(Orientation.Right, yNy, ySf)
			.ticks(4, 's')
			.setTickSize(width)
//.........这里部分代码省略.........

        new MixedObject(20, new Date(2016, 7, 30)),
        new MixedObject(30, new Date(2015, 3, 15)),
        new MixedObject(40, new Date(2014, 3, 15)),
        new MixedObject(50, new Date(2017, 4, 15))
    ],
    [
        new MixedObject(40, new Date(2016, 3, 1)),
        new MixedObject(50, new Date(2016, 9, 30)),
    ]
);

// -----------------------------------------------------------------------------
// Test Histogram
// -----------------------------------------------------------------------------

let tScale = scaleTime();

// Create histogram generator ==================================================

let defaultHistogram: d3Array.HistogramGenerator<number, number>;
defaultHistogram = d3Array.histogram();

let testHistogram: d3Array.HistogramGenerator<MixedObject, Date>;
testHistogram = d3Array.histogram<MixedObject, Date>();

// Configure histogram generator ===============================================

// value(...) ------------------------------------------------------------------

testHistogram = testHistogram.value(function (d, i, data) {
    let datum: MixedObject = d; // d is of type MixedObject

// copy(...) -----------------------------------------------------------------

const copiedIdentityScale: d3Scale.ScaleIdentity = identityScale.copy();

// -------------------------------------------------------------------------------
// Time Scale Factories
// -------------------------------------------------------------------------------

// scaleTime() and scaleUtc() ----------------------------------------------------

let localTimeScaleNumber: d3Scale.ScaleTime<number, number>;
let localTimeScaleString: d3Scale.ScaleTime<string, string>;
let localTimeScaleNumString: d3Scale.ScaleTime<number, string>;

localTimeScaleNumber = d3Scale.scaleTime();
localTimeScaleString = d3Scale.scaleTime<string>();
localTimeScaleNumString = d3Scale.scaleTime<number, string>();

let utcScaleNumber: d3Scale.ScaleTime<number, number>;
let utcScaleString: d3Scale.ScaleTime<string, string>;
let utcScaleNumString: d3Scale.ScaleTime<number, string>;

utcScaleNumber = d3Scale.scaleUtc();
utcScaleString = d3Scale.scaleUtc<string>();
utcScaleNumString = d3Scale.scaleUtc<number, string>();

// domain(...) -----------------------------------------------------------------

localTimeScaleNumber = localTimeScaleNumber.domain(domainDates);

	private drawChart(svg: Selection<BaseType, {}, HTMLElement, any>, data: Array<[number, number]>) {
		this.data = data

		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement

		const width = div.clientWidth
		const height = div.clientHeight

		svg.attr('width', width)
		svg.attr('height', height)

		const view = svg.select('g.view')

		// это просто извращённый способ добавить
		// в группу два элемента <path>
		// .enter() это часть фреймворка d3 для работы
		// с обновлениями, но мы пока игнорируем и
		// делаем обновления руками
		const path = view
			.selectAll('path')
			.data([0, 1])
			.enter().append('path')

		// тут наши перевернутые базисы которые мы
		// cтеснительно запрятали в onViewPortResize
		// таки вылезли

		// на видимую область можно смотреть абстрактно
		// как на отдельное пространство

		// ось Y перевернута - что выглядит на языке
		// базисов как перевернутый базис
		//
		// а на языке векторов как разность точек, которая
		// у X положительна а у Y отрицательна
		// ну и наоборот если перевернем первый базис
		// то второй тоже перевернется но переворачивание
		// по-прежнему выглядит как умножение разности на -1
		//	
		// короче неважно какой из них считать первичным
		// в любом случае один перевернут по отношению к другому
		const bScreenXVisible = new AR1Basis(0, width)
		const bScreenYVisible = new AR1Basis(height, 0)

		// интерфейс с лигаси-кодом. Некоторая многословость простительна
		const x = scaleTime().range(bScreenXVisible.toArr())
		const y = scaleLinear().range(bScreenYVisible.toArr())
		const viewNode: SVGGElement = view.node() as SVGGElement
		const pathTransform = new MyTransform(svg.node() as SVGSVGElement, viewNode)

		// bIndexVisible is the visible ends of model
		// affine space at chart edges.
		// They are updated by zoom and pan or animation
		// but unaffected by arrival of new data
		const updateScales = (bIndexVisible: AR1Basis) => {
			// рассчитается деревом отрезков, но все равно долго
			// так что нужно сохранить чтобы
			// два раза не перевычислять для линий графиков и для осей
			const bTemperatureVisible = this.bTemperatureVisible(bIndexVisible)
			// референсное окно имеет достаточно странный вид
			// по горизонтали у нас полный диапазон
			// а по вертикали только видимый
			// надеюсь это исправится при переходе от отдельных
			// пространств по Х и Y к единому пространству
			// являющeмся их прямым произведением
			pathTransform.onReferenceViewWindowResize(this.bIndexFull, bTemperatureVisible)

			const bTimeVisible = bIndexVisible.transformWith(this.idxToTime)
			x.domain(bTimeVisible.toArr())
			y.domain(bTemperatureVisible.toArr())
		}

		this.tree = new SegmentTree(this.data, this.data.length, this.buildSegmentTreeTuple)

		// в референсном окне видны все данные, поэтому
		// передаем bIndexFull в качестее bIndexVisible
		updateScales(this.bIndexFull)

		const xAxis = new MyAxis(Orientation.Bottom, x)
			.ticks(4)
			// изменять размер тиков надо при изменении
			// размеров окна
			.setTickSize(height)
			.setTickPadding(8 - height)

		const yAxis = new MyAxis(Orientation.Right, y)
			.ticks(4, 's')
			.setTickSize(width)
			.setTickPadding(2 - width)

		const gX = bindAxisToDom(svg, xAxis, x)
		const gY = bindAxisToDom(svg, yAxis, y)

		// it's important that we have only 1 instance
		// of drawProc and not one per event
		// вызывается из zoom и drawNewData
		const scheduleRefresh = drawProc(() => {
			const bIndexVisible = pathTransform.fromScreenToModelBasisX(bScreenXVisible)
			updateScales(bIndexVisible)
//.........这里部分代码省略.........