Old school D3 from simpler times

All examples By author By category About

j-mueller

Full window Github gist

Zoom and Pan with D3

Click anywhere on the background to pan. Move the triangle to zoom.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Zoom and Pan with D3</title>
        <meta name="description" content="Zoom with D3">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="chart.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></script>
    </head>
    <body>
        <div class="zoomchart" id="zoomChart">
        </div>

<script type="text/javascript" src="zoom.js"></script>
        <script type="text/javascript">
            var width = $('#zoomChart').width(),
                z = zoom().width(width).height(300);
                zoomChart = d3.select(".zoomchart");
                zoomChart.call(z);
                zoomChart.select(".viewport")
                    .append("rect")
                    .attr("x", 100)
                    .attr("y", 100)
                    .attr("width", 60)
                    .attr("height", 40)
                    .attr("fill", "#555");
                zoomChart.select(".viewport")
                    .append("rect")
                    .attr("x", 200)
                    .attr("y", 150)
                    .attr("width", 60)
                    .attr("height", 40)
                    .attr("fill", "#922");
        </script>
        
    </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.5.0 to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

https://mbostock.github.com/d3/d3.js?2.5.0