TypeScript Selection.on方法代码示例

	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)
//.........这里部分代码省略.........