d3.js по умолчанию axis.tickFormat до 24 часов часов

мне очень нравится поведение по умолчанию axis.tickFormat при построении вещей в течение долгого времени, и просто создать свою ось х, как это:d3.js по умолчанию axis.tickFormat до 24 часов часов

var xAxisBottom = d3.svg.axis().scale(xScale);

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

Хорошо, что поведение оси по умолчанию выглядит так. Плохо то, что он показывает часы в AM/PM, и я хотел бы изменить это на 24-часовые часы.

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

enter image description here

Итак, есть простой способ, чтобы получить 24-часовой вместо AM/PM?

источник

2013-03-27 Joel

Не так просто, как в случае «вызова одной строки кода», но вы можете легко прокрутить собственный формат времени. См. Пример here. Основная идея заключается в том, что у вас есть список форматов даты и функция фильтра, которая при задании даты возвращает true, если используется соответствующий формат. В вашем случае вам понадобится только два уровня: один для отображения даты (если дата составляет полночь) или время (если дата составляет 12 часов).

источник

2013-03-27 08:54:43

Ah okey, спасибо, например. Я не знал, как позволить каждому отдельному тику иметь условный формат времени. В моем случае я должен изменить формат тиков на основе временного интервала, так что мне не понадобятся только два уровня, но я думаю, что что-то подобное может покрыть и мой случай. – Joel

Извините, не понял, что это было именно то, что мне нужно :). Мне просто нужно изменить некоторые форматы – Joel

Стоит отметить, что если вы используете время UTC на своей оси вместо местного времени, тогда d3 называет другой набор форматировщиков внутренне. Вы нуждаетесь в этом:

  return (d3.utcSecond(date) < date ? formatMillisecond 
      : d3.utcMinute(date) < date ? formatSecond 
      : d3.utcHour(date) < date ? formatMinute 
      : d3.utcDay(date) < date ? formatHour 
      : d3.utcMonth(date) < date ? (d3.utcWeek(date) < date ? formatDay : formatWeek) 
      : d3.utcYear(date) < date ? formatMonth 
      : formatYear)(date);

вместо вызовов, указанных в приведенном выше примере. Изменение должно заменить «d3. utc XXX (дата)» для «d3. время XXX (дата)».

источник

2017-02-04 18:10:55

d3.js по умолчанию axis.tickFormat до 24 часов часов

ответ

Смежные вопросы