How to use the d3-zoom.zoomIdentity.translate function in d3-zoom

To help you get started, we’ve selected a few d3-zoom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github higlass / higlass / app / scripts / TrackRenderer.js View on Github external
}
    }

    this.zoomTransform = !this.currentProps.zoomable
      ? zoomIdentity
      : event.transform;

    const zooming = this.prevZoomTransform.k !== this.zoomTransform.k;

    // if there is dragging along a 1d track, only allow panning
    // along the axis of the track
    if (!zooming) {
      if (trackOrientation === '1d-horizontal') {
        // horizontal tracks shouldn't allow movement in the y direction
        // don't move along y axis
        this.zoomTransform = zoomIdentity.translate(
          this.zoomTransform.x, this.prevZoomTransform.y
        ).scale(this.zoomTransform.k);
      } else if (trackOrientation === '1d-vertical') {
        // vertical tracks shouldn't allow movement in the x axis
        this.zoomTransform = zoomIdentity.translate(
          this.prevZoomTransform.x, this.zoomTransform.y
        ).scale(this.zoomTransform.k);
      }

      this.element.__zoom = this.zoomTransform;
    }

    this.applyZoomTransform(true);

    this.prevZoomTransform = this.zoomTransform;
    this.props.pubSub.publish('app.zoom', event);
github higlass / higlass / app / scripts / TrackRenderer.js View on Github external
if (animateTime) {
      let selection = this.elementSelection;

      this.activeTransitions += 1;

      if (!document.hidden) {
        // only transition if the window is hidden
        selection = selection
          .transition()
          .duration(animateTime);
      }

      selection.call(
        this.zoomBehavior.transform,
        zoomIdentity.translate(translateX, translateY).scale(k),
      )
        .on('end', () => {
          setZoom();
          this.activeTransitions -= 1;
        });
    } else {
      setZoom();
    }

    return last;
  }
github higlass / higlass / app / scripts / TrackRenderer.js View on Github external
if (animateTime) {
      let selection = this.elementSelection;

      this.activeTransitions += 1;

      if (!document.hidden) {
        // only transition if the window is hidden
        selection = selection
          .transition()
          .duration(animateTime);
      }

      selection.call(
        this.zoomBehavior.transform,
        zoomIdentity.translate(translateX, translateY).scale(k),
      )
        .on('end', () => {
          setZoom();
          this.activeTransitions -= 1;
        });
    } else {
      setZoom();
    }

    return last;
  }
github hpcc-systems / Visualization / packages / common / src / SVGZoomWidget.ts View on Github external
zoomTo(translate?, scale?, transitionDuration = 250) {
        translate = translate || this._zoomTranslate;
        scale = scale || this._zoomScale;
        transitionDuration = transitionDuration === undefined ? this.zoomDuration() : transitionDuration;

        this.element().transition().duration(transitionDuration)
            .call(this._currZoom.transform, d3ZoomIdentity.translate(translate[0], translate[1]).scale(scale))
            ;
    }
github openstreetmap / iD / modules / renderer / map.js View on Github external
function setTransform(t2, duration, force) {
        var t = projection.transform();
        if (!force && t2.k === t.k && t2.x === t.x && t2.y === t.y) return false;

        if (duration) {
            _selection
                .transition()
                .duration(duration)
                .on('start', function() { map.startEase(); })
                .call(zoom.transform, d3_zoomIdentity.translate(t2.x, t2.y).scale(t2.k));
        } else {
            projection.transform(t2);
            _transformStart = t2;
            _selection.call(zoom.transform, _transformStart);
        }

        return true;
    }
github ideditor / id-sdk / packages / math / projection / lib / raw_mercator.js View on Github external
projection.transform = function(obj) {
    if (!arguments.length) return d3_zoomIdentity.translate(_x, _y).scale(_k);
    _x = +obj.x;
    _y = +obj.y;
    _k = +obj.k;
    return projection;
  };
github Talend / react-flow-designer / src / reducers / flow.reducer.js View on Github external
return state.update('transformToApply', () =>
				zoomIdentity
					.translate(state.get('transform').x, state.get('transform').y)
					.scale(state.get('transform').k)
					.scale(1 / state.get('transform').k)
					.translate(
						-(state.get('transform').x + action.x),
						-(state.get('transform').y + action.y),
					),
			);
github yubowenok / visflow / client / src / components / network / network.ts View on Github external
private setZoomTransform() {
    if (!this.zoomBahavior) {
      return;
    }
    select(this.$refs.svg as SVGSVGElement)
      .call(this.zoomBahavior.transform,
        zoomIdentity.translate(this.zoomTranslate[0], this.zoomTranslate[1]).scale(this.zoomScale));
  }

d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.

ISC
Latest version published 3 years ago

Package Health Score

74 / 100
Full package analysis