title: D3: Translation of x axis not working
body: <p>I am implementing a bar chart with scrolling along the x axis in D3. I wrote my zoom function and my zoom behaviour, but whenever I try to pan along my chart the values on my x axis just disappear. Does anyone have any ideas why?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var zoom = d3.behavior.zoom()
                  .scaleExtent([1, 1])
                  .x(x)
                  .on("zoom", zoomed);
  
  function zoomed() {
          console.log("Entered zoom function!!!");
      var t = zoom.translate(),
      tx = t[0],
      ty = t[1];
  
      tx = Math.min(tx, 0);
      tx = Math.max(tx, w - d3.max(data, function(d) { return d.ppm_value; }));
      zoom.translate([tx, ty]);
      chart.select(".x.axis")
          .call(xAxis);
      bars.attr('transform', 'translate(' + d3.event.translate[0] + ',0) '
                                  + 'scale(' + d3.event.scale + ',1)');
  
  }
  </code></pre>
  
  <p>I can't figure out what am I missing. Could somebody help me?
  Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//holds the data 
          var data =  [  {"yy":12,"mm":01,ppm_value:90000},           {"yy":11,"mm":02,ppm_value:50000}];
  
          //formats the date
          var format = d3.time.format("%Y-%m-%d");
          
          //define margins, height and width
          var margin = {
                  top: 20,
                  right: 30,
                  bottom: 30,
                  left: 40
              },
              w = 4000 - margin.left - margin.right,
              h = 500 - margin.top - margin.bottom;
          
          var x = d3.time.scale()
           .range([0, w]);
  
          var y = d3.scale.linear()
              .range([h, 0]);
  
          var xAxis = d3.svg.axis()
              .scale(x)
              .orient("bottom")
              .ticks(60)
           .tickFormat(d3.time.format("%m.%Y"));
  
          var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left");
          
          var zoom = d3.behavior.zoom()
                 .scaleExtent([1, 1])
                 .x(x)
                 //.xExtent([d3.min(data, function(d) { return new Date(d.date); }), d3.max(data, function(d) { return new Date(d.date); })])
                 .on("zoom", zoomed);
  
          //create the svg 
          var chart = d3.select("#testChart").append("svg")
              .attr("width", w + margin.left + margin.right)
              .attr("height", h + margin.top + margin.bottom)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
           .call(zoom);
          
          var rect = chart.append("rect")
              .attr("width", w)
              .attr("height", h)
              .style("fill", "none")
              .style("pointer-events", "all");
  
          //loops through data
          data.forEach(function (d) {
           //coerce to number
           d.ppm_value = +d.ppm_value;
           d.yy = +d.yy;
           d.mm = +d.mm;
           d.date = new Date("20" + d.yy + "/" +d.mm);
           var dateTick = format(d.date);
           d.date = dateTick;
           console.log(d.ppm_value);
          });
          
          //map values onto x axis
           x.domain([d3.min(data, function(d) { return new Date(d.date); }), d3.max(data, function(d) { return new Date(d.date); })])
          
           //map values onto y axis
           y.domain([0, d3.max(data, function(d) { return d.ppm_value; })]);
  
          chart.append("g")
              .attr("class", "x axis")
              .attr("transform", "translate(0," + h + ")")
              .call(xAxis)
  
          chart.append("g")
              .attr("class", "y axis")
              .call(yAxis);
  
          var bars = chart.append("g")
              .attr("class", "chartobjects");
  
          bars.selectAll(".rect")
              .data(data)
              .enter().append("rect")
              .attr("class", "rectBar")
              .on("click",hello)
              .attr('x', function(d) {
               console.log(d.date);
                  return x(new Date(d.date));
              })
              .attr("y", function(d) {
                  return y(d.ppm_value);
                  console.log(d.ppm_value);
              })
              .attr("height", function(d) {
                  return h - y(d.ppm_value);
              })
              .attr("width", 15)
              .attr("fill", function(d) {
                  return d.ppm_value &gt; 35000 ? "blue" : "red"
              });
  
          function hello() {
              alert("Hello world!!");
          }
  
          function zoomed() {
           console.log("Entered zoom function!!!");
           var t = zoom.translate(),
                tx = t[0],
                ty = t[1];
  
            tx = Math.min(tx, 0);
            tx = Math.max(tx, w - d3.max(data, function(d) { return d.ppm_value; }));
            zoom.translate([tx, ty]);
            chart.select(".x.axis")
              .call(xAxis);
            
            bars.attr('transform', 'translate(' + d3.event.translate[0] + ',0) '
              + 'scale(' + d3.event.scale + ',1)');
            
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.1.0/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Panel --&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-12 col-xs-12 col-sm-12 col-md-12"&gt;
          &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-heading"&gt;
                  Test chart done in D3
              &lt;/div&gt;
      &lt;div class="panel-body"&gt;
       &lt;!-- &lt;div style="overflow: scroll;"&gt; --&gt;
       &lt;div id="testChart"&gt;
      &lt;!-- &lt;/div&gt; --&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>