Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active April 9, 2020 21:42

Revisions

  1. mbostock revised this gist Apr 9, 2020. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    license: gpl-3.0
    redirect: https://observablehq.com/@d3/programmatic-zoom
  2. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  3. mbostock revised this gist Oct 31, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@

    </style>
    <button>Reset</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
  4. mbostock revised this gist Jun 11, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -31,7 +31,7 @@

    </style>
    <button>Reset</button>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
  5. mbostock created this gist Apr 9, 2015.
    1 change: 1 addition & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    A simpler variation of [programmatic zoom](/mbostock/3892928) without the use of transitions.
    100 changes: 100 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,100 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Zoom + Pan</title>
    <style>

    body {
    position: relative;
    width: 960px;
    }

    svg {
    font: 10px sans-serif;
    shape-rendering: crispEdges;
    }

    rect {
    fill: #ddd;
    }

    .axis path,
    .axis line {
    fill: none;
    stroke: #fff;
    }

    button {
    position: absolute;
    right: 30px;
    top: 30px;
    }

    </style>
    <button>Reset</button>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
    .domain([-width / 2, width / 2])
    .range([0, width]);

    var y = d3.scale.linear()
    .domain([-height / 2, height / 2])
    .range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(-height);

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5)
    .tickSize(-width);

    var zoom = d3.behavior.zoom()
    .x(x)
    .y(y)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(zoom);

    svg.append("rect")
    .attr("width", width)
    .attr("height", height);

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

    d3.select("button").on("click", reset);

    function zoomed() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    }

    function reset() {
    svg.call(zoom
    .x(x.domain([-width / 2, width / 2]))
    .y(y.domain([-height / 2, height / 2]))
    .event);
    }

    </script>
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.