How to use the d3-zoom.zoomIdentity.scale 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 feedzai / brushable-histogram / src / Histogram / Histogram.js View on Github external
_onDensityChartDomainChanged = (brushSelection) => {
        const brushSelectionMin = brushSelection[0];
        const brushSelectionMax = brushSelection[1];

        // converts for a time-scale
        const brushedDomain = brushSelection.map(this.densityChartXScale.invert);

        d3Select(this.histogramChartRef.current).call(this.zoom.transform, d3ZoomIdentity
            .scale(this.state.densityChartDimensions.width / (brushSelectionMax - brushSelectionMin))
            .translate(-brushSelection[0], 0));

        this._updateBrushedDomainAndReRenderTheHistogramPlot(brushedDomain);
    };
github CyberReboot / CRviz / src / features / visualization / d3-viz / setup-zoom.js View on Github external
function zoomTo(datum, animate = true) {
    const size = datum.r * 2 * (1 + viewPadding);
    const k = Math.min(width, height) / size;
    const transform = zoomIdentity
      .scale(k)
      .translate(
          - datum.x + width / 2 / k,
          - datum.y + height / 2 / k,
      );

    zoomBehavior.transform(
      !animate ? zoomRoot : zoomRoot.transition().duration(1000),
      transform
    );
  }
github khartec / waltz / waltz-ng / client / scenario / components / scenario-diagram / scenario-diagram-utils.js View on Github external
export function resetZoom(svgGroups) {
    svgGroups
        .svg
        .transition()
        .duration(800)
        .call(myZoom.transform, zoomIdentity.scale(1).translate(1, 1));
}
github graphsense / graphsense-dashboard / src / nodeGraph.js View on Github external
this.highlightedNodes.forEach(node => {
      x1 = Math.min(x1, node.getXForLinks())
      y1 = Math.min(y1, node.getYForLinks())
      x2 = Math.max(x2, node.getXForLinks() + node.getWidthForLinks())
      y2 = Math.max(y2, node.getYForLinks() + node.getHeightForLinks())
    })
    let dx = (x2 - x1)
    let dy = (y2 - y1)
    x1 -= dx * 0.3
    x2 += dx * 0
    y1 -= dy * 0.1
    y2 += dy * 0.1
    let k = w / Math.max(w, (x2 - x1))
    let x = (x2 + x1) / -2
    let y = (y2 + y1) / -2
    let transform = zoomIdentity.scale(k).translate(x, y)
    /*
    TODO make transition duration depend on distance of transforms
    let vx = x * k - this.transform.x * this.transform.k
    let vy = y * k - this.transform.y * this.transform.k
    let len = Math.sqrt(vx * vx + vy * vy)
    logger.debug('len', len)
    let duration = len / 200 * 1000
    */
    let duration = 1000
    this.svg.transition().duration(duration).call(this.zoom.transform, transform)
    this.zoomToNodes = false
  }
  setTxLabel (type) {

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