TypeScript Selection.node方法代码示例

 download(name?: string) {
   var isFileSaverSupported = false;
   try {
     isFileSaverSupported = !!new Blob();
   } catch (e) {
     alert("blob not supported");
   }
   name = (name === undefined)? "trial.svg" : name;
   let gnode: any = this.g.node()
   var bbox = gnode.getBBox();
   var width = this.svg.attr("width"), height = this.svg.attr("height");
   this.g.attr("transform", "translate(" + (-bbox.x + 5) +", " +(-bbox.y + 5) +")");
   let svgNode: any = this.svg
     .attr("title", "Trial")
     .attr("version", 1.1)
     .attr("width", bbox.width + 10)
     .attr("height", bbox.height + 10)
     .attr("xmlns", "http://www.w3.org/2000/svg")
     .node();
   var html = svgNode.parentNode.innerHTML;
   html = '<svg xmlns:xlink="http://www.w3.org/1999/xlink" ' + html.slice(4);
   this.svg
     .attr("width", width)
     .attr("height", height);
   this.g.attr("transform", this.transform);
   if (isFileSaverSupported) {
     var blob = new Blob([html], {type: "image/svg+xml"});
     fs.saveAs(blob, name);
   }
 }

	constructor(
		svg: Selection<BaseType, {}, HTMLElement, any>,
		dataLength: number,
		drawLine: (element: any, cityIdx: number, chartIdx: number) => void,
		chartIdx: number) {
		const node: SVGSVGElement = svg.node() as SVGSVGElement
		const div: HTMLElement = node.parentNode as HTMLElement
		const viewNode: SVGGElement = svg.select('g').node() as SVGGElement
		const t = new ViewWindowTransform(viewNode.transform.baseVal)
		t.setViewPort(div.clientWidth, div.clientHeight)

		const minY = -5
		const maxY = 83
		let minX = 0
		let maxX = dataLength
		t.setViewWindow(minX, maxX, minY, maxY)

		const paths: Selection<any, any, any, any> = svg.select('g.view').selectAll('path')

		animateBench((elapsed: number) => {
			// Redraw paths
			paths.each(function(cityIdx: number) {
				drawLine(this, cityIdx, chartIdx)
			})
			t.setViewWindow(minX++, maxX++, minY, maxY)
		})
	}

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

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