让d3.js在d3.scale.linear（）中将“00 02 04 ...”标记为“12AM 2AM 4AM ...”

Question

我的数据已经按小时排序，因此“小时”值是从00（12am）到23（11pm）的整数。

我正在尝试使用d3.js将此数据绘制为散点图。

由于每小时数据已经是整数形式，我认为使用d3.scale.linear().domain([-1,23])绘制点数会更容易（使用-1作为下限，以便午夜数据不重叠y轴）。到目前为止，这已经成功，但现在x轴上的标签显示“0 2 4 6 8 ......”等。

如何将其转换为实际小时（即上午12点，凌晨2点，凌晨4点等）？我尝试过使用.tickValues( ['12AM', '2AM', '4AM'... etc] )，但这会在输出和控制台中产生NaN。

是否可以像这样指定自定义轴标签？或者我是否必须将hour值正确地作为时间刻度读取并将其解析为"%H"，而不是简单地使用线性刻度？

这是问题的一个方面：http://jsfiddle.net/jqw7a9mu/1/

谢谢！

Answer 1

您应该为.tickFormat()变量附加xAxis方法：

var xAxis = d3.svg.axis().scale(x).orient("bottom")
            .tickFormat(function(d) {
                var f = ["12AM", "1AM", "2AM", "3AM", "4AM", "5AM", "6AM", "7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM"];
            return (f[d]);
        });

此方法可创建所需的标题：

如果你想强制d3.js不跳过1AM，3AM等，你应该使用.tickValues()方法：

var xAxis = d3.svg.axis().scale(x).orient("bottom")
            .tickFormat(function(d) {
                var f = ["12AM", "1AM", "2AM", "3AM", "4AM", "5AM", "6AM", "7AM", "8AM", "9AM", "10AM", "11AM", "12PM", "1PM", "2PM", "3PM", "4PM", "5PM", "6PM", "7PM", "8PM", "9PM", "10PM", "11PM"];
            return (f[d]);
        })
        .tickValues([0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]);

在这种情况下，最终的图片将是：

但你应该考虑图表的水平尺寸。

DEMO：http://jsfiddle.net/qy5ohw0x/2/