TypeScript d3-zoom.zoom函数代码示例

		const scheduleRefresh = drawProc(() => {
			// Apply pan zoom transform
			if (currentPanZoomTransformState != null) {
				d3zoom().transform(zoomArea, currentPanZoomTransformState)
			}

			// Visible index is the same for NY and SF
			const bIndexVisible = pathTransformNy.fromScreenToModelBasisX(bScreenXVisible)

			updateScaleX(bIndexVisible)
			updateScaleY(bIndexVisible, this.treeNy, pathTransformNy, yNy)
			updateScaleY(bIndexVisible, this.treeSf, pathTransformSf, ySf)

			pathTransformNy.updateViewNode()
			pathTransformSf.updateViewNode()

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

  constructor(graphId:string, div: any, config: any={}) {
    this.i = 0;

    let defaultConfig: TrialConfig = {
      customSize: function(g:TrialGraph) {
        return [
          g.config.width,
          g.config.height,
        ]
      },
      customMouseOver: (g:TrialGraph, d: VisibleTrialNode, name: string) => false,
      customMouseOut: (g:TrialGraph, d: VisibleTrialNode) => false,
      customForm: (g: TrialGraph, form: d3_Selection<d3_BaseType, {}, HTMLElement | null, any>) => null,

      duration: 750,

      top: 50,
      right: 30,
      bottom: 80,
      left: 30,

      width: 900,
      height: 500,

      useTooltip: false,
      fontSize: 10,
      labelFontSize: 10,

      nodeSizeX: 47,
      nodeSizeY: 100,
    };
    this.config = (Object as any).assign({}, defaultConfig, config);


    this.graphId = graphId;

    this.zoom = d3_zoom()
      .on("zoom", () => this.zoomFunction())
      .on("start", () => d3_select('body').style("cursor", "move"))
      .on("end", () => d3_select('body').style("cursor", "auto"))
      .wheelDelta(() => {
        return -d3_event.deltaY * (d3_event.deltaMode ? 120 : 1) / 2000;
      })

    this.div = d3_select(div)
    let form = d3_select(div)
      .append("form")
      .classed("trial-toolbar", true);

    this.svg = d3_select(div)
      .append("div")
      .append("svg")
      .attr("width", this.config.width)
      .attr("height", this.config.height)
      .call(this.zoom);

    this.createMarker('end', 'enormal', 'black');
    this.createMarker('endbefore', 'ebefore', 'red');
    this.createMarker('endafter', 'eafter', 'green');

    this.g = this.svg.append("g")
      .attr("id", this._graphId())
      .attr("transform", "translate(0,0)")
      .classed('TrialGraph', true);

    this.tree = d3_tree()
      .nodeSize([
        this.config.nodeSizeX,
        this.config.nodeSizeY
      ]);

    // **Toolbar**
    this.createToolbar(form);

    // Tooltip
    this.tooltipDiv = d3_select("body").append("div")
      .attr("class", "now-tooltip now-trial-tooltip")
      .style("opacity", 0)
      .on("mouseout", () => {
        this.closeTooltip();
      });

    // Zoom
    this.svg
      .call(this.zoom.transform, d3_zoomIdentity.translate(
        this.config.left + this.config.width / 2,
        this.config.top
      ))
  }

//.........这里部分代码省略.........
			// а по вертикали только видимый
			// надеюсь это исправится при переходе от отдельных
			// пространств по Х и 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)
			.setTickPadding(2 - width)

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

		const zoomArea: Selection<any, any, any, any> = svg.append('rect')
			.attr('class', 'zoom')
			.attr('width', width)
			.attr('height', height)
			.call(d3zoom()
				.scaleExtent([1, 40])
				// в перспективе взять экстент из bScreenVisible
				// хотя хез как быть с другим порядком
				.translateExtent([[0, 0], [width, height]])
				.on('zoom', this.zoomHandler.bind(this)))
		zoomArea.on('mousemove', this.mouseMoveHandler.bind(this))

		let currentPanZoomTransformState: ZoomTransform = null
		const dotRadius = 3
		const fixNaN = (n: number, valueForNaN: any) => isNaN(n) ? valueForNaN : n
		const makeDot = (view: any) => select(view).append('circle').attr('cx', 0).attr('cy', 0).attr('r', 1).node() as SVGCircleElement
		const highlightedGreenDot = makeDot(viewNy)
		const highlightedBlueDot = makeDot(viewSf)

		const identityMatrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix()

		// it's important that we have only 1 instance
		// of drawProc and not one per event
		// вызывается из zoom и drawNewData
		const scheduleRefresh = drawProc(() => {
			// Apply pan zoom transform
			if (currentPanZoomTransformState != null) {
				d3zoom().transform(zoomArea, currentPanZoomTransformState)
			}

			// Visible index is the same for NY and SF
			const bIndexVisible = pathTransformNy.fromScreenToModelBasisX(bScreenXVisible)

function zoomedCanvas(this: HTMLCanvasElement, d: CanvasDatum) {
    // Cast d3 event to D3ZoomEvent to be used in zoom event handler
    const e = event as d3Zoom.D3ZoomEvent<HTMLCanvasElement, any>;
    if (context) {
        context.save();
        context.clearRect(0, 0, this.width, this.height); // this element
        context.translate(e.transform.x, e.transform.y);
        context.scale(e.transform.k, e.transform.k);
        drawPointsOnCanvas(d.radius);
        context.restore();
    }
}

let canvasZoom: d3Zoom.ZoomBehavior<HTMLCanvasElement, CanvasDatum>;

canvasZoom = d3Zoom.zoom<HTMLCanvasElement, CanvasDatum>()
    .scaleExtent([1 / 2, 4])
    .on('zoom', zoomedCanvas);

// SVG Example --------------------------------------------------------------

function zoomedSVGOverlay(this: SVGRectElement) {
    // Cast d3 event to D3ZoomEvent to be used in zoom event handler
    const e = event as d3Zoom.D3ZoomEvent<HTMLCanvasElement, any>;

    g.attr('transform', e.transform.toString());
}

let svgZoom: d3Zoom.ZoomBehavior<SVGRectElement, SVGDatum>;

svgZoom = d3Zoom.zoom<SVGRectElement, SVGDatum>();

//.........这里部分代码省略.........
		}

		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)
			pathTransform.updateViewNode()

			xAxis.axisUp(gX)
			yAxis.axisUp(gY)
		})
		pathTransform.onViewPortResize(bScreenXVisible, bScreenYVisible)
		pathTransform.onReferenceViewWindowResize(this.bIndexFull, bPlaceholder)
		svg.append('rect')
			.attr('class', 'zoom')
			.attr('width', width)
			.attr('height', height)
			.call(d3zoom()
				.scaleExtent([1, 40])
				// в перспективе взять экстент из bScreenVisible
				// хотя хез как быть с другим порядком
				.translateExtent([[0, 0], [width, height]])
				.on('zoom', this.zoomHandler.bind(this)))

		// вызывается здесь ниже
		// и из публичного updateChartWithNewData()
		// но в принципе должно быть в common.ts
		this.drawNewData = () => {
			// создание дерева не должно
			// дублироваться при создании чарта
			this.tree = new SegmentTree(this.data, this.data.length, this.buildSegmentTreeTuple)
			const drawLine = (cityIdx: number) => line()
				.defined((d: [number, number]) => {
					return !(isNaN(d[cityIdx]) || d[cityIdx] == null)
				})
				.x((d: [number, number], i: number) => i)
				.y((d: [number, number]) => d[cityIdx])

			path.attr('d', (cityIndex: number) => drawLine(cityIndex).call(null, this.data))
			scheduleRefresh()
		}

		this.drawNewData()

		// публичный метод, используется для ретрансляции
		// зум-события нескольким графикам
		this.zoom = () => {
			pathTransform.onZoomPan(d3event.transform)
			scheduleRefresh()
		}

		function raisedCos(elapsed: number) {
			return -(Math.cos(elapsed / 6500) - 1) / 2
		}

		function animateCosDown(maxX: number, minX: number, elapsed: number) {
			return maxX - (maxX - minX) * raisedCos(elapsed)
		}

		let offsetX = 0
		let offsetDelta = 100
		let panDirection = 1
		const f = (elapsed: number) => {
			pathTransform.onZoomPan(zoomIdentity.translate(-1000 + offsetX * panDirection, 0).scale(40))
			offsetX = offsetX + offsetDelta
			panDirection = -panDirection
			offsetDelta = offsetX > 1000 || offsetX < 0 ? -offsetDelta : offsetDelta
			scheduleRefresh()
		}

		const timer = runTimer((elapsed: number) => {
			f(elapsed)
			if (elapsed > 60 * 1000) {
				timer.stop()
			}
		})
	}

// var refNode: SVGGElement = svg.append("g").node() as SVGGElement
const svgNode = svg.node() as SVGSVGElement

g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; })
    .attr("r", 2.5);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(zoom()
        .scaleExtent([1/16, 16])
        .on("zoom", zoomed));

//const rr = 500
const viewNode: SVGGElement = g.node() as SVGGElement
const zoomPan = test(svgNode, viewNode, width)
	
/*
const refT = new ViewWindowTransform(refNode.transform.baseVal)
const p1 = newPoint(-rr, -rr)
const p2 = newPoint(rr, rr)



const corner1 = newPoint(0, 0)