Get started with d3-zoom CDN

BSD-3-Clause licensed

D3-Zoom: Interactive zooming and panning of SVG graphics in D3.js.

Tags:
  • d3
  • d3-module
  • zoom
  • behavior
  • interaction

Stable version

Copied!

How to start using d3-zoom CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with d3-zoom CDN - cdnhub.io</title>
  <style>
    svg {
      max-width: 100%;
      height: auto;
    }
  </style>
  <script src="https://d3js.org/d3.v6.min.js"></script>
  <script src="https://cdn.cdnhub.io/d3-zoom/3.0.0/d3-zoom.min.js"></script>
</head>
<body>
  <svg width="500" height="500">
    <rect width="100" height="100" x="50" y="50" fill="steelblue" />
  </svg>

  <script>
    const svg = d3.select("svg");
    const zoom = d3.zoom()
      .scaleExtent([1, 8])
      .translateExtent([[0, 0], [500, 500]])
      .extent([[0, 0], [500, 500]]);

    svg.call(zoom);

    svg.on("dblclick.zoom", null);

    svg.on("dblclick", () => {
      const newTransform = zoom.transform(svg.node());
      svg.call(zoom.transform, newTransform);
    });
  </script>
</body>
</html>

All versions