title: d3js zoom into plot
body: <p>I have made a plot with d3js and because the plot function goes outside the plot I wanted to clip it. At the same time I also thought about zooming. Therefor I started implementing the following example into my code; <a href="http://bl.ocks.org/mbostock/3892919" rel="nofollow">http://bl.ocks.org/mbostock/3892919</a></p>
  
  <p>Unfortunately however, it seems that my implementation is incorrect. My x- and y-axis labels seem to disappear + the background has turned black + the actual plot is missing until you try to zoom :S.</p>
  
  <p>Solution how to fix, i.e., correctly implement this is asked. Further I am also open for improvements of my code.</p>
  
  <p>Jsfiddle of the version with zoom: <a href="http://jsfiddle.net/n3Lndkum/12/" rel="nofollow">http://jsfiddle.net/n3Lndkum/12/</a>
  Jsfiddle of the last working version: <a href="http://jsfiddle.net/n3Lndkum/9/" rel="nofollow">http://jsfiddle.net/n3Lndkum/9/</a></p>
  
  <p>Embedded version:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var margin  = {top: 20, right: 20, bottom: 50, left: 50},
      width   = 250 - margin.left - margin.right,
      height  = 250 - margin.top  - margin.bottom,
      padding = 50;
  
  var x = d3.scale.linear()
      .range([0, width])
      .domain([0, 10]);
  
  var y = d3.scale.linear()
      .range([height, 0])
      .domain([0, 10]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(5)
   .innerTickSize(-6)
   .outerTickSize(0)
   .tickPadding(7);
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5)
   .innerTickSize(-6)
   .outerTickSize(0)
   .tickPadding(7);
  
  var zoom = d3.behavior.zoom()
      .x(x)
      .y(y)
      .scaleExtent([0.1, 32])
      .on("zoom", zoomed);
  
  var data = [];
  
  for (var k = -100; k &lt; 101; k++) {
      data.push({x: k/10, y: 0.5*k*k/100});
  }
  
  var line = d3.svg.line()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.y); })
      .interpolate("linear");
  
  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);
  
  // Add x axis
  svg.append("g")
   .attr("class","x axis")
   .attr("transform","translate(0," + height + ")")
   .call(xAxis);
  
  // Add y axis 
  svg.append("g")
   .attr("class","y axis")
   .call(yAxis);
  
  /* append additional X axis */
  svg.append("g")
   .attr("class", "axis")
   .attr("transform", "translate(" + [0, 0] + ")")
   .call(xAxis.innerTickSize(6).tickPadding(-20).tickFormat(""));
  
  /* append additional y axis */
  svg.append("g")
   .attr("class","y axis")
   .attr("transform", "translate(" + [width, 0] + ")")
   .call(yAxis.innerTickSize(6).tickPadding(-20).tickFormat(""));
  
  // Add x axis label  
  svg.append("text")
   .attr("transform", "translate(" + (width / 2) + "," + (height + margin.bottom) + ")")
   .style("font-size","15")
   .style("text-anchor", "middle")
   .text("x axis");
  
  // Add y axis label
  svg.append("text")
   .attr("transform", "rotate(-90)")
   .attr("y",0 - margin.left)
   .attr("x",0 - (height / 2))
   .attr("dy", "1em")
   .style("font-size","15")
   .style("text-anchor", "middle")
   .text("y axis");
  
  // Add x grid
  svg.append("g")         
   .attr("class","grid")
   .attr("transform","translate(0," + height + ")")
   .call(xAxis
          .tickSize(-height,-height,0)
    .tickFormat("")
          );
  
  // Add y grid
  svg.append("g")         
   .attr("class","grid")
   .call(yAxis
    .tickSize(-width,-width,0)
    .tickFormat("")
   );
  
  function zoomed() {
   svg.select(".x.axis").call(xAxis);
     svg.select(".y.axis").call(yAxis);
      
      // Add data
      svg.append("path")
          .attr("class","line")
          .attr("d",line(data));
      
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font: 10px sans-serif;
  }
  
  .axis path,
  .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
  }
  
  .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
  }
  
  .grid .tick {
      stroke: lightgrey;
      opacity: 0.7;
  }
  
  .grid path {
      stroke-width: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>