Как ограничить d3.svg.axis целыми метками?

Ответ 1

Вы можете использовать d3.format вместо написания своей собственной функции формата для этого.

d3.svg.axis()
    .tickFormat(d3.format("d"));

Вы также можете использовать tickFormat на вашем шкале, который по умолчанию будет автоматически использоваться осью.

Ответ 2

Я понял, что достаточно скрывать эти значения, а не полностью исключать. Это можно сделать, используя tickFormat (https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) как таковой:

d3.svg.axis()
    .tickFormat(function(e){
        if(Math.floor(e) != e)
        {
            return;
        }

        return e;
    });

Ответ 3

Использование d3.format("d") как tickFormat может не работать во всех сценариях (видеть эту ошибку). На устройствах Windows Phone (и, возможно, на других) неточные вычисления могут привести к ситуациям, когда тики неверно определены как целые числа, т.е. е. галочка "3" может быть внутренне сохранена как 2.9999999999997, которая для d3.format("d") не является целым числом.

В результате ось вообще не отображается. Такое поведение особенно проявляется в галочках до 10.

Одним из возможных решений является перенос машинной ошибки путем указания значения epsilon. Значения не должны быть точными целыми числами таким образом, но могут отличаться от следующего целого числа до диапазона epsilon (который должен быть ниже, чем ваша ошибка данных):

var epsilon = Math.pow(10,-7);

var axis = d3.svg.axis().tickFormat(function(d) {
    if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon))
        return;
    return d;
}

Другим решением, которое также упоминается в других потоках, является указание фиксированного количества меток, а затем округление тиков (которые теперь должны быть "почти" целыми) до ближайшего целого. Для этого вам нужно знать максимальное значение ваших данных:

var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))