Мне не удалось установить только 5 тактов на моей оси x, по умолчанию он установил 10 тактов, кратных 5, я пытался использовать ´.ticks (5) ´, но у меня это не сработало. Если визуализировать график на мобильном телефоне, 10 тиков становятся практически нечитаемыми. Но как я уже упоминал ´.ticks (5) ´ это не работает
это фрагмент, который рисует ось x:
var xAxis = svg.append("g")
.style("font-size", textSetter())
.attr("class", "xAxis", "axis")
.attr("transform", "translate(" + 0 + "," + heightTwo + ")")
.call(d3.axisBottom(xScale).ticks(5)
.tickPadding(5).tickFormat(d => d + "%"))
Как я могу это решить? Спасибо
Вы можете установить весь текст на оси для определенного класса, а затем скрыть галочки, например, на основе числа.
//Create the xAxis and assign x-axisticks class to the tick text
var xAxis = svg.append("g")
.style("font-size", textSetter())
.attr("class", "xAxis", "axis")
.attr("transform", "translate(" + 0 + "," + heightTwo + ")")
.call(d3.axisBottom(xScale)
.selectAll('text')
.attr('class', 'x-axisticks');
//remove the ticks which based on the multiples
var xticks = d3.selectAll('.x-axisticks');
xticks.attr('class', function (d, i) {
i = i + 1;
if (i % 5 !== 0) d3.select(this).remove();
});
Надеюсь это поможет. Для ответа на более конкретный вариант использования, вероятно, потребуется разместить дополнительный код с вашей стороны, чтобы я мог адаптировать ответ, но это должно сработать.