D3- Как отобразить галочки оси xAxis

Question

Я не могу найти способ отображения тиков 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

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

Answer 1

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

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

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

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