title: D3: Zooming/Panning Line Graph in SVG is not working in Canvas
body: <p>I created <code>zooming/panning</code> graph with d3 using <code>SVG</code>. I'm trying to create the same exact graph with <code>Canvas</code>. My issue is, when it comes to the zooming and panning of the <code>Canvas</code> graph, the graph is disappearing and I cannot figure out why. I created two JSBin's to show the code of both. Can someone assist me.</p>
  
  <p><a href="http://jsbin.com/xiqelab/1/edit?js,output" rel="nofollow noreferrer"><strong>SVG - JSBin</strong></a></p>
  
  <p><a href="http://jsbin.com/xiqelab/edit?js,output" rel="nofollow noreferrer"><strong>Canvas - JSBin</strong></a></p>
  
  <p>My <code>SVG</code> zoom code looks like this:</p>
  
  <pre><code>// Zoom Components
  zoom = d3.zoom()
          .scaleExtent([1, dayDiff*12])
          .translateExtent([[0, 0], [width, height]])
          .extent([[0, 0], [width, height]])
          .on("zoom", zoomed);
  
  function zoomed(){
      t = d3.event.transform;
      xScale.domain(t.rescaleX(x2).domain());
      xAxis = d3.axisBottom(xScale).tickSize(0).tickFormat(d3.timeFormat('%b'));
      focus.select(".axis--x").call(xAxis); //xAxis changes
      usageLinePath.attr('d',line); //line path reference, regenerate
  }
  </code></pre>
  
  <p>My <code>Canvas</code> zoom code looks like this:</p>
  
  <pre><code>// Zoom Components
  zoom = d3.zoom()
          .scaleExtent([1, dayDiff*12])
          .translateExtent([[0, 0], [width, height]])
          .extent([[0, 0], [width, height]])
          .on("zoom", zoomed);
  
  function zoomed() {
      t = d3.event.transform;
      x.domain(t.rescaleX(x2).domain());
      context.save();
      context.clearRect(0, 0, width, height);
      draw();
      context.restore();
  }
  
  function draw() {
      xAxis();
      yAxis();
  
      context.beginPath();
      line(data);
      context.lineWidth = 1.5;
      context.strokeStyle = "steelblue";
      context.stroke();
  }
  </code></pre>