TypeScript Selection.attr方法代码示例

 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);
   }
 }

 updateWindow(): void {
   let size = this.config.customSize(this);
   this.config.width = size[0];
   this.config.height = size[1];
   this.svg
     .attr("width", size[0])
     .attr("height", size[1]);
 }

const centroid: [number, number] = svgArc.centroid(arcDatum);
// centroid = svgArc.centroid(arcDefaultDatum); // fails, wrong datum type

// generate arc ----------------------------------------------------------------------

// use with canvas
canvasArc(arcDefaultDatum);

// use with svg

const pArc: Selection<SVGPathElement, ArcDatum, any, any> = select<SVGPathElement, ArcDatum>('.arc-paths'); // mock
const wrongArc1: Selection<SVGCircleElement, ArcDatum, any, any> = select<SVGCircleElement, ArcDatum>('.arc-paths'); // mock
const wrongArc2: Selection<SVGPathElement, { test: string }, any, any> = select<SVGPathElement, { test: string }>('.arc-paths'); // mock

pArc.attr('d', svgArc);
// wrongArc1.attr('d', svgArc); // fails, incompatible this contexts
// wrongArc2.attr('d', svgArc); // fails, incompatible datum types

// pathStringMaybe = svgArc(arcDatum); // fails, wrong this type for invocation

// Use with custom object

interface ArcerDatum {
    innerRadius: number;
    outerRadius: number;
}

class Arcer {
    constructor(innerRadius: number, outerRadius: number) {
        this.startAngle = 0;

// render to GeoContext/Canvas

geoPathCanvas(samplePolygon);
geoPathCanvas(sampleSphere);
geoPathCanvas(sampleGeometryCollection);
geoPathCanvas(sampleExtendedGeometryCollection);
geoPathCanvas(sampleFeature);
geoPathCanvas(sampleExtendedFeature1);
geoPathCanvas(sampleExtendedFeature2);
geoPathCanvas(sampleFeatureCollection);
geoPathCanvas(sampleExtendedFeatureCollection);

// Use path string generator for SVGPathElement

let svgPath: Selection<SVGPathElement, d3Geo.ExtendedFeature<GeoJSON.Polygon, SampleProperties1>, any, any>;
svgPath.attr('d', geoPathSVG);

let svgCircleWrong: Selection<SVGCircleElement, d3Geo.ExtendedFeature<GeoJSON.Polygon, SampleProperties1>, any, any>;
// svgCircleWrong.attr('d', geoPathSVG); // fails, mismatch in `this` context

let svgPathWrong: Selection<SVGPathElement, GeoJSON.Polygon, any, any>;
// svgPathWrong.attr('d', geoPathSVG); // fails, mismatch in datum type




// ----------------------------------------------------------------------
// Context interface
// ----------------------------------------------------------------------
let context: d3Geo.GeoContext = {
    beginPath: () => { return; },

 private zoomFunction() {
   this.closeTooltip();
   this.transform = d3_event.transform;
   this.g.attr("transform", d3_event.transform);
 }

let centroid: [number, number] = svgArc.centroid(arcDatum);
// $ExpectError
centroid = svgArc.centroid(arcDefaultDatum); // fails, wrong datum type

// generate arc ----------------------------------------------------------------------

// use with canvas
canvasArc(arcDefaultDatum);

// use with svg

const pArc: Selection<SVGPathElement, ArcDatum, any, any> = select<SVGPathElement, ArcDatum>('.arc-paths'); // mock
const wrongArc1: Selection<SVGCircleElement, ArcDatum, any, any> = select<SVGCircleElement, ArcDatum>('.arc-paths'); // mock
const wrongArc2: Selection<SVGPathElement, { test: string }, any, any> = select<SVGPathElement, { test: string }>('.arc-paths'); // mock

pArc.attr('d', svgArc);
// $ExpectError
wrongArc1.attr('d', svgArc); // fails, incompatible this contexts
// $ExpectError
wrongArc2.attr('d', svgArc); // fails, incompatible datum types

// $ExpectError
pathStringMaybe = svgArc(arcDatum); // fails, wrong this type for invocation

// Use with custom object

interface ArcerDatum {
    innerRadius: number;
    outerRadius: number;
}

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