Значения меток d3 только для целых чисел

У меня есть диаграмма d3, чьи значения варьируются от 0-3. Я хотел бы, чтобы ось y отображала только целые значения, которые я могу сделать с помощью

var yAxis = d3.svg.axis().scale(y).orient("right").tickFormat(d3.format("d"));

Тем не менее, на нецелых отметках все еще есть отметки. Установка формата тика только скрывает эти метки. Я могу явно указать количество тиков или значения галочки, но то, что я хотел бы сделать, это просто указать, что отметки меток появляются только в целых значениях. Возможно ли это?

enter image description here

Ответы

Ответ 1

Вы можете добавить .ticks(4) и .tickSubdivide(0), как я сделал ниже:

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .ticks(4)
.tickFormat(d3.format("d"))
    .tickSubdivide(0);

Ответ 2

Вы можете запрограммировать количество тиков на data.length - 1 (это решает вопрос, который у вас был для небольшого количества тиков)

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickFormat(d3.format("d"))
    .ticks(data.length - 1)

Ответ 3

Используется этот TIP, чтобы эта работа работала над динамическими диаграммами (1 или более диаграмм на странице)

Это трюк. Я изменился, чтобы быть Math.min(maxHeight + 1, yAxis.ticks()), так что если высота графика меньше чем количество тиков, это уменьшает количество тиков. - Джефф Storey Ноя 28 '12 в 2:47

  // It is either 10 or Maximum Chart height + 1 

        var graphValues = selection.data()[0].map(function(obj) {
            return obj['count'];
        }).compact();  

        Array.prototype.maxValArray = function() {
          return Math.max.apply(null, this);
        };

        var maxValue = graphValues.maxValArray();

        yAxis.ticks(Math.min(maxValue + 1, 10))

Ответ 4

Из всех перечисленных решений мне не удалось избавиться от отметок.

.xAxis().ticks(4)
.tickFormat(d3.format("d"));

удалить ярлыки, но не галочки.

Поэтому я предлагаю применить порог к тикам(). Если меньше 4, тогда он установлен на само ограничение (0,1,2,3). Делается с:

.on("preRedraw", function(chart) {
    var maxTick = chart.group().top(1)[0].value;
    if (maxTick < 4) {
      chart.xAxis().ticks(maxTick);
    } else {
      chart.xAxis().ticks(4);
    }

});

Jsfiddle доступен по адресу https://jsfiddle.net/PBrockmann/k7qnw3oj/

Дайте мне знать, если есть более простое решение. С уважением

Ответ 5

Правильным решением является получение тиков с помощью .ticks(), фильтрация их, чтобы оставить только целые числа, и передача их в .tickValues():

const yAxisTicks = yScale.ticks()
    .filter(tick => Number.isInteger(tick));
const yAxis = d3.axisLeft(yScale)
    .tickValues(yAxisTicks)
    .tickFormat(d3.format('d'));

Для полноты вот объяснение, почему другие решения плохие:

Решение @BoomShakalaka использует .tickSubdivide(), который больше не существует.

Решения @cssndrx и @kris заставляют вас указывать количество тактов, поэтому оно не будет работать в общем случае.