Как использовать d3.time.scale для создания метки для каждого часа дня и каждого дня недели

Question

Хорошо, может быть так много дубликатов для этого вопроса на SO, я проверил почти все из них, но я не мог понять out ответ на мой запрос

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

я получил все работает за исключением одной вещи, я хочу этикетки на х axsis начать с полуночи до полуночи

(00:00 to 23:00) и в интервалах 1ч [00:00, 01:00, 02:00, 03:00, 04:00, ......22:00, 23:00]

Но я не могу получить это право я перепробовал все возможные комбинации, используя d3.time.scale но я не получаю это право я получаю все случайные метки на оси х

это функция я в настоящее время с помощью которых дают эти случайные значения

$scope.xAxisTickFormatFunction = function() { 
     return function(d) { 
      return d3.time.format("%H:%M")(new Date(d)); 
     }; 
    }; 

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

я действительно не могу понять, как d3.time.scale works, я работаю над этим, так как вчера

Просьба помочь

спасибо большое

Answer 1

Реальный фокус в том, чтобы иметь возможность воспользоваться все встроенные инструменты форматирования времени/интервалов в D3. Вот очень простой пример, основанный от this block, где вы определяете масштаб времени по совокупности в один день (24 часа) с помощью d3.time.scale().nice():

// Set up the SVG 
var svg = d3.select("body").append("svg") 
      .attr("width", width) 
      .attr("height", height); 

// Define your time scale 
var x = d3.time.scale() 
    .domain([new Date, new Date]) 
    .nice(d3.time.day) 
    .range([0, width - 50]); 

// Add your axis 
svg.append("g") 
    .attr("transform", "translate(5,0)") 
    .call(d3.svg.axis().scale(x).ticks(24).tickFormat(d3.time.format("%H:%M"))); 

Приведенный выше код производит эту ось: