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

Question

我有已经按小时排序的数据，因此 "hour" 值是从 00（上午 12 点）到 23（晚上 11 点）的整数。

我正在尝试使用 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"，而不是简单地使用线性尺度？

这是问题的 jsfiddle：http://jsfiddle.net/jqw7a9mu/1/

谢谢！

Answer 1

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

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不跳过凌晨1点、凌晨3点等，你应该使用.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]);

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

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

演示：http://jsfiddle.net/qy5ohw0x/2/

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

Getting d3.js to label "00 02 04..." as "12AM 2AM 4AM..." in d3.scale.linear()

javascript

d3.js