NVD3 - настройка тиков на оси

Question

У меня есть линейная диаграмма nvd3, которая отображает временной ряд и не может получить тики по оси x вправо.

Для более длительных периодов времени он работает должным образом. Но для более коротких промежутков времени (здесь: 12/31/05 до 01/01/06), та же дата отображается на несколько тиков:

Пожалуйста, посмотрите на code for this chart on JSFiddle

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

Я попытался явно установить количество тиков с chart.xAxis.ticks() без успеха. Единственное, что имеет какой-либо эффект, - это явно установить значения тика с chart.xAxis.tickValues([...]), но я бы предпочел не рассчитывать их сам.

Answer 1

Способ решения этого вопроса в целом - custom multi-scale time formats. Обратите внимание, что этот пример сам по себе не будет работать с NVD3, потому что он использует более старую версию D3, однако примеры ниже.

Проблема в вашем случае заключается в том, что тики не являются «чистыми» разделами времени, и если вы применяете многомасштабный формат, вы получаете что-то вроде this. Он всегда показывает более мелкозернистый формат, потому что все остальное будет связано с потерей точности.

Вы можете использовать простую эвристику, чтобы показывать дату вместо времени, если час меньше 3, что достаточно хорошо работает в вашем случае. См. Пример here. Правильный способ сделать это - сделать ваши тики чистыми дивизиями.

Это подводит нас к вашему фактическому вопросу. Там нет другого пути, кроме явно установить .tickValues() за то, что вы хотите сделать, но вы можете вычислить позиции х в данных довольно легко:

var xvalues = [], 
    tmp = data.map(function(e) { 
      return e.values.map(function(d) { return d[0]; }); 
      }); 
xvalues.concat.apply(xvalues, tmp); 

код не симпатичный, потому что это вложенная структура, но достаточно простой. Используя это, вы можете установить свои значения тика явно, полный пример here.