How to use the d3-selection.event.transform function in d3-selection

To help you get started, we’ve selected a few d3-selection 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
}
      }

      // if somebody is dragging along a 1d track, do value scale moving
      if (trackOrientation === '1d-horizontal'
        && event.sourceEvent.movementY) {
        this.valueScaleMove(event.sourceEvent.movementY);
      } else if (trackOrientation === '1d-vertical'
        && event.sourceEvent.movementX) {
        this.valueScaleMove(event.sourceEvent.movementX);
      }
    }

    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
github streamcode9 / svg-time-series / benchmarks / d3-pan-zoom-vwt / index.ts View on Github external
function zoomed()
{
    zoomCount += 1
    const z = d3event.transform.toString()

    if (z != newZoom)
    {
        newZoom = z
		newZoomT = zoomAffineTransform(d3event.transform)
        draw()
    }
}
github preignition / multi-chart / src / container / mixin / zoomable-mixin.js View on Github external
const zoomed = () => {
          this.zoomedEl.attr('transform', d3Event.transform);
        };
github garden-io / garden / dashboard / src / components / graph / index.tsx View on Github external
const zoomHandler = zoom().on("zoom", () => {
    svgGroup.attr("transform", event.transform)
  })
  svg.call(zoomHandler)
github hpcc-systems / Visualization / packages / chart / src / WordCloud.ts View on Github external
.on("zoom", function (evt) {
                if (d3Event && d3Event.transform) {
                    context.zoomed(context._d3Zoom, [d3Event.transform.x, d3Event.transform.y], d3Event.transform.k);
                }
            })
            ;
github onap / sdc / dox-sequence-diagram-ui / src / main / webapp / lib / ecomp / asdc / sequencer / components / diagram / Diagram.jsx View on Github external
const zoomed = function zoomed() {
            if (!this.initialTransformX && !this.initialTransformY) {
                this.initialTransformX = d3event.transform.x;
                this.initialTransformY = d3event.transform.y;
            }

            gContent.attr(
                'transform',
                `translate(${d3event.transform.x -
                    this.initialTransformX}, ${d3event.transform.y -
                    this.initialTransformY})scale(${d3event.transform.k}, ${
                    d3event.transform.k
                })`
            );
        };
github dgraph-io / ratel / client / src / components / D3Graph / index.js View on Github external
    onZoom = () => this.updateZoom(currentEvent.transform);
github onap / sdc / dox-sequence-diagram-ui / src / main / webapp / lib / ecomp / asdc / sequencer / components / diagram / Diagram.jsx View on Github external
const zoomed = function zoomed() {
            if (!this.initialTransformX && !this.initialTransformY) {
                this.initialTransformX = d3event.transform.x;
                this.initialTransformY = d3event.transform.y;
            }

            gContent.attr(
                'transform',
                `translate(${d3event.transform.x -
                    this.initialTransformX}, ${d3event.transform.y -
                    this.initialTransformY})scale(${d3event.transform.k}, ${
                    d3event.transform.k
                })`
            );
        };
github denisemauldin / d3-timeline / src / timelines.js View on Github external
var move = function() {
					g.select(".view")
					.attr("transform", "translate(" + event.transform.x + ",0)"
														 + "scale(" + event.transform.k + " 1)");

					g.selectAll(".timeline-xAxis")
						.attr("transform", function(d) {
							 return "translate(" + event.transform.x + ", " + timeAxisYPosition + ")"
										+ "scale(" + event.transform.k + " 1)";
						});

					var new_xScale = event.transform.rescaleX(xScale);
					g.selectAll('.timeline-xAxis').call(function(d) { xAxis.scale(new_xScale); });

					var xpos = -event.transform.x;
					scroll(xpos, xScale);
				};
			};
github ffont / freesound-explorer / src / containers / Map / MapContainer.jsx View on Github external
zoomHandler() {
    const translateX = d3Event.transform.x;
    const translateY = d3Event.transform.y;
    const scale = d3Event.transform.k;
    this.props.updateMapPosition({ translateX, translateY, scale });
  }