Как использовать объекты даты как метки меток для линейной оси?

Question

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

У меня есть массив полный финиковых объектов для моих клеща этикеток - dateTickValues ​​

console.log(dateTickValues) 

возвращает

Thu Jan 01 2015 05:30:00 GMT+0530 (IST),Fri Jan 02 2015 05:30:00 GMT+0530 (IST),Sat Jan 03 2015 05:30:00 GMT+0530 (IST),Sun Jan 04 2015 05:30:00 GMT+0530 (IST),Mon Jan 05 2015 05:30:00 GMT+0530 (IST),Tue Jan 06 2015 05:30:00 GMT+0530 (IST) 

, но когда я использую

var xScale = d3.scale.linear() 
.domain([0, no_of_ticks]) 
.range([0, width]); 


var xAxis = d3.svg.axis() 
.scale(xScale) 
.ticks(no_of_ticks) //computed elsewhere in the code - clean 
.tickValues(dateTickValues) 
.orient("top"); 

клеща этикетки на результирующее Граф пуст - это значит, что метки тика не отображаются.

Почему это происходит и как я могу это исправить?

Answer 1

Ключ используется .tickFormat() function. Мне непонятно, что вы на самом деле пытаетесь сделать, так что вот две версии.

Во-первых, вы можете использовать Date сами объекты с масштабом, то .tickFormat() что-то вроде

.tickFormat(function(d) { return d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(d)); }); 

Полный демо here.

Если вы используете индекс в массиве дат с масштабом, это было бы что-то вроде

.tickFormat(function(d, i) { return d3.time.format("%Y-%m-%d %H:%M:%S")(new Date(dates[i])); }); 

Полная демо here.

В отдельном примечании не имеет смысла использовать .ticks() и .tickValues() в то же время - вы, вероятно, хотите только .tickValues().