Блог

Я не могу найти способ отображения тиков оси xAxis, если они расположены в самом низу svg-canvas.

Переменная, которую я хочу показать, — это кварталы разных лет, поэтому я преобразовал массив строк [«1947-01-01″,»1947-04-01»,…] в массив объектов даты js [Пн 01 апреля 1957 00:00:00 GMT 0000 (GMT 01:00), Пн 01 июля 1957 01:00:00 GMT 0100 (GMT 01:00), …]

Я построил ось xAxis

 const xScale=d3.scalePoint()
                    .domain(dates) // dates is a array of date objects
                    .range([0,w])

const xAxis=d3.axisBottom(xScale);
  

И, наконец, я установил группу

 svg.append("g")
            .attr("class","axis")
            .attr(`transform`,`translate(0,${h})`) // h is the height of the canvas
            .call(xAxis)
             .ticks(4) // It does not work  in this code
  

Я пытался применить команду ticks, но в этом коде это не работает.
С другой стороны, я не знаю, как отобразить тики ниже оси X, когда это находится в нижней строке холста.

Я думаю, что проблема может быть в ваших масштабах и цепочке метода .ticks(). Согласно документации d3.axis, .ticks() должен использоваться called на вашей оси. Попробуйте внести следующие изменения в свой xAxis .

  const xAxis = d3.axisBottom(xScale).ticks(4);
  

И удалить .ticks() при рендеринге оси x,

 svg.append('g')
  .attr('class','axis')
  .attr('transform',`translate(0,${h})`) 
  .call(xAxis);