title: Call axis function causing problems D3
body: <p>I am just starting to learn D3, and have been following a tutorial to create this piece of code.</p>
  
  <p>I created a couple of bars and intend to create an x axis for my graph.
  The problem is when I add the ".call(xAxis)" to my canvas the browsers won't show me anything and I get the following error in the console:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'copy' of undefined d3.min.js:5
  (anonymous function) d3.min.js:5
  (anonymous function) d3.min.js:3
  R d3.min.js:1
  da.each d3.min.js:3
  n d3.min.js:5
  da.call d3.min.js:3
  (anonymous function)
  </code></pre>
  
  <p>Can anyone please help me with what's wrong? I really can't understand what's missing or what I'm doing wrong!</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Intro to D3&lt;/title&gt;
      &lt;script src="d3.min.js"&gt;&lt;/script&gt;
  &lt;head&gt;
  
  &lt;body&gt;
      &lt;script&gt;
  
          var width = 1024;
          var height = 768;
  
          var dataArray = [20, 40, 60, 120];
  
          var xAxis = d3.svg.axis()
          .scale(widthScale);
  
          var widthScale = d3.scale.linear()
          .domain([0, 120])
          .range([0, width]);
  
          var color = d3.scale.linear()
          .domain([0, 120])
          .range(["red", "blue"]);
  
          var canvas = d3.select("body")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .append("g")
          .attr("transform", "translate(20, 0)")
          .call(xAxis);
  
          var bars = canvas.selectAll("rect")
          .data(dataArray)
          .enter()
              .append("rect")
              .attr("width", function(d){ return widthScale(d); })
              .attr("height", 20)
              .attr("fill", function(d){ return color(d); })
              .attr("y", function(d, i){ return i*30; });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>