simple zoom

_.md

[ Launch: simple zoom ] 9095081 by DeBraid

config.json

{"description":"simple zoom","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

    var w = 1200,
    h = 500,
    x = d3.time.scale().range([0, w]),  
    xAxis = d3.svg.axis().scale(x).orient("bottom").tickSize(-h, 0).tickPadding(6); 

    var svg = d3.select("svg")
    .attr("width", w)
    .attr("height", h+50)
    .append("svg:g");

    svg.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")");

    svg.append("svg:rect")
    .attr("class", "pane")
    .attr("width", w)
    .attr("height", h)
    .call(d3.behavior.zoom().on("zoom", zoom));

    x.domain([new Date(1999, 0, 1), new Date(2014, 0, 0)]);

    draw();


    function draw() {
      console.log ("drawing");
      svg.select("g.x.axis").call(xAxis);
    }

    function zoom() {
      console.log("zooming");
      d3.event.transform(x); // TODO d3.behavior.zoom should support extents
      draw();
    }

style.css

svg {
      font-size: 10px;
      fill: red;
    }

    g {
      overflow: visible;
      stroke: green;
    }

    text {
      z-index: 20;
    }

    rect.pane {
      cursor: move;
      fill: none;
      pointer-events: all;
    }