title: d3.js: axisBottom is appearing at the top instead
body: <p>I'm trying to add an X-axis to the bottom of my D3 (v5) generated graph, as below. However, the X-axis appears at the top, even though I am calling <code>axisBottom()</code>. Is there a mistake that I'm making somewhere?</p>
  
  <pre><code>results = {
    x: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    y: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    y1: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
  }
  
  const W = 1000,
        H = 620,
        margin = {
          top: 20,
          right: 80,
          bottom: 30,
          left: 50,
        };
  
  const width = W - margin.left - margin.right,
        height = H - margin.top - margin.bottom;
  
  let scaleX = d3.scaleLinear()
    .domain([results.x[0], results.x[results.x.length-1]]) // x is produced by numpy.linspace
    .range([0, width]);
  
  let ymax = Object.keys(results)
    .filter(k =&gt; k !== 'x')
    .map(k =&gt; d3.max(results[k].y))
    .reduce((x, y) =&gt; Math.max(x, y), -Infinity);
  
  let scaleY = d3.scaleLinear()
    .domain([0, ymax])
    .range([height, 0]);
  
  let xAxis = d3.axisBottom(scaleX);
  
  let svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
  
  svg.append("g")
    .attr("class", "x axis")
    .call(xAxis);
  </code></pre>
  
  <p>I've attached an image for reference: axis appears right at the top of the SVG element; I expected it to appear at the bottom instead.  <a href="https://i.stack.imgur.com/lNEYU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lNEYU.png" alt="axis appears right at the top of the SVG element; I expected it to appear at the bottom instead."></a></p>