d3.js - X-Axis Date Formatting in Rickshaw

Question

I have added a datetime X-axis to my rickshaw graph:

var x_axis = new Rickshaw.Graph.Axis.Time({
   graph: graph,
   timeFixture: new Rickshaw.Fixtures.Time(),
});

However, it doesn't generally give me the format I want. Can I give it a specifier so the datetimes are always in a specified format (i.e. something like d3.time.format(specifier) )?

Answer 1

基于 Lars 的链接示例，我完成了以下操作：

var format = function(d) {
    d = new Date(d)
    return d3.time.format("%c")(d)
}
var x_axis = new Rickshaw.Graph.Axis.X({
        graph: graph,
        tickFormat: format,
});

这似乎可行，所以现在我只需要找到一种方法来使间距变好....

Answer 2

格式化程序只会格式化字符串，它不会确定间距。为了控制间距和格式，您可以编写自己的“Fixture”，例如查看https://github.com/shutterstock/rickshaw/blob/master/src/js/Rickshaw.Fixtures.Time.js一个例子。夹具提供两件事：间距（例如年、月、日、小时）和每个的格式。根据您的需要创建类似的夹具、空间和格式，并将其设置在 x 轴上：

var xAxis = new Rickshaw.Graph.Axis.Time( {
  graph: graph,
  //timeFixture: new Rickshaw.Fixtures.Time()
  timeFixture: new MyOwnTimeFixture()
} );

Answer 3

试试这个，它会起作用的

var xAxis = new Rickshaw.Graph.Axis.Time({
        graph: graph,
        tickFormat: function(x){
            return new Date(x).toLocaleString();
        },
        ticks: 4
    });