title: D3.js - Line Graph: Area path goes over x and y axis on zoom
body: <p>I have a line graph with area path. Everything works great, only when I zoom in, the area path goes over x-axis and also y-axis:</p>
  
  <p><a href="https://i.stack.imgur.com/iV8vQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iV8vQ.jpg" alt="enter image description here"></a></p>
  
  <p>Please help me find what am I missing in my code - to "hide" this area path when it comes to x-axis/y-axis.</p>
  
  <p><strong>You can find working example <a href="https://jsfiddle.net/matjazzeleznik/hara70wa/" rel="nofollow noreferrer">here</a></strong> (jsFiddle)</p>
  
  <p>And this full code for graph:</p>
  
  <pre><code>    var chartBody;
      var clip;
      var line;
      var x;
      var y;
      var zoom;
      var make_x_axis;
      var make_y_axis;
      var xAxis;
      var yAxis;
      var area;
      var areaPath;
      var width;
      var height;
      var margin;
  
      var data = [];
      var panel_1_status = 0; //0 - not loaded, 1 - first time loaded, 2 - getting new data every X seconds
  
      function initGraph() {
  
          margin = {
              top: 0,
              right: 20,
              bottom: 20,
              left: 45
          };
  
          width = 600 - margin.left - margin.right;
          height = 400 - margin.top - margin.bottom;
  
          x = d3.time.scale()
                  .domain(d3.extent(data, function (d) {
                      return d.t;
                  }))
                  .range([0, width]);
  
          y = d3.scale.linear()
                  .domain(d3.extent(data, function (d) {
                      return d.val;
                  }))
                  .range([height, 0]);
  
          line = d3.svg.line()
                  .interpolate('basis') //krivulja smooth
                  .x(function (d) {
                      return x(d.t);
                  })
                  .y(function (d) {
                      return y(d.val);
                  });
  
          zoom = d3.behavior.zoom()
                  .x(x)
                  .y(y)
                  .on("zoom", zoomed);
  
          svg = d3.select('#chart &gt; .svg-container')
                  .append("svg:svg")
                  .attr("preserveAspectRatio", "xMinYMin meet")
                  .attr("viewBox", "0 0 600 400")
                  .classed("svg-content-responsive", true)
                  .append("svg:g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                  .call(zoom);
  
          svg.append("svg:rect")
                  .attr("width", width)
                  .attr("height", height)
                  .attr("class", "plot");
  
          make_x_axis = function () {
              return d3.svg.axis()
                      .scale(x)
                      .orient("bottom")
                      .ticks(5);
          };
  
          make_y_axis = function () {
              return d3.svg.axis()
                      .scale(y)
                      .orient("left")
                      .ticks(5);
          };
  
          xAxis = d3.svg.axis()
                  .scale(x)
                  .orient("bottom")
                  .ticks(5);
  
          svg.append("svg:g")
                  .attr("class", "x axis")
                  .attr("transform", "translate(0, " + height + ")")
                  .call(xAxis);
  
          yAxis = d3.svg.axis()
                  .scale(y)
                  .orient("left")
                  .ticks(5);
  
          svg.append("g")
                  .attr("class", "y axis")
                  .call(yAxis)
                  .append("text")
                  .attr("transform", "rotate(-90)")
                  .attr("y", 6)
                  .attr("x", -5)
                  .attr("dy", ".71em")
                  .style("text-anchor", "end")
                  .text("Temperature °C");
  
          svg.append("g")
                  .attr("class", "x grid")
                  .attr("transform", "translate(0," + height + ")")
                  .call(make_x_axis()
                          .tickSize(-height, 0, 0)
                          .tickFormat(""));
  
          svg.append("g")
                  .attr("class", "y grid")
                  .call(make_y_axis()
                          .tickSize(-width, 0, 0)
                          .tickFormat(""));
  
          clip = svg.append("svg:clipPath")
                  .attr("id", "clip")
                  .append("svg:rect")
                  .attr("x", 0)
                  .attr("y", 0)
                  .attr("width", width)
                  .attr("height", height);
  
          chartBody = svg.append("g")
                  .attr("clip-path", "url(#clip)");
  
          chartBody.append("svg:path")
                  .datum(data)
                  .attr("class", "line")
                  .attr("d", line);
  
          area = d3.svg.area()
                  .interpolate('basis')
                  .x(function (d) {
                      return x(d.t);
                  })
                  .y0(height)
                  .y1(function (d) {
                      return y(d.val);
                  });
          // Add the filled area
          areaPath = svg.append("path")
                  .datum(data)
                  .attr("class", "area")
                  .attr("d", area);
  
      }
  
      function zoomed(){
  
          svg.select(".x.axis").call(xAxis);
          svg.select(".y.axis").call(yAxis);
          svg.select(".x.grid")
                  .call(make_x_axis()
                          .tickSize(-height, 0, 0)
                          .tickFormat(""));
          svg.select(".y.grid")
                  .call(make_y_axis()
                          .tickSize(-width, 0, 0)
                          .tickFormat(""));
          svg.select(".line")
                  .attr("class", "line")
                  .attr("d", line);
  
          svg.select("path.area").attr("d", area);
  
      }
  
      //load data
      data = [
      {
          t: 1457040823000,
          val: 20
      },
      {
          t: 1457040828000,
          val: 1
      },
      {
          t: 1457040833000,
          val: 39
      },
      {
          t: 1457040838000,
          val: 3
      },
      {
          t: 1457040843000,
          val: 33
      },
      {
          t: 1457040848000,
          val: -10
      },
      {
          t: 1457040853000,
          val: 21
      },
      {
          t: 1457040858000,
          val: 17
      },
      {
          t: 1457040863000,
          val: 13
      },
      {
          t: 1457040868000,
          val: 4
      }
  
      ];
      initGraph();
  </code></pre>