d3.js: axisBottom появляется сверху

Question

Я пытаюсь добавить ось X внизу моего сгенерированного графика D3 (v5), как показано ниже.Тем не менее, ось X отображается сверху, хотя я звоню axisBottom().Есть ли ошибка, которую я где-то делаю?

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 => k !== 'x')
  .map(k => d3.max(results[k].y))
  .reduce((x, y) => 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);

Я приложил изображение для справки: ось появляется прямо вверху элемента SVG;Я ожидал, что он появится внизу.

Answer 1

Согласно документации d3.axisBottom

Создает новый генератор осей, ориентированный снизу для заданного масштаба, с пустыми аргументами тиков, размером тиков 6 и заполнением.из 3. В этой ориентации отметки отображаются ниже горизонтального пути домена.

Итак, вам все равно придется перевести ось.