javascript - 如何使用 d3.time.scale 为一天中的每一小时和一周中的每一天创建标签

Question

好吧，这个问题可能有很多重复，我已经检查了几乎所有的问题，但我无法找到我的任务的答案。

我有这项服务，它可以统计我的网站每分钟的点击次数，我想使用 d3 nvd3 折线图将其显示在仪表板中。

我一切正常，除了一件事，我希望 x 轴上的标签从午夜到午夜，即 (00:00 到 23:00) 以 1 小时为间隔 [00:00, 01:00, 02:00, 03:00, 04:00, ..., 22:00, 23:00]

但我无法做到这一点。我已经使用 d3.time.scale 尝试了所有可能的组合，但我没有得到正确的结果。我在 x 轴上得到所有随机标签。

这是我当前使用的函数，它给出了这些随机值:

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

在我得到一天的工作时间表后，我也想在一周的每一天都这样做。

我真的不明白d3.time.scale是如何工作的，我从昨天开始就一直在研究这个问题。

Answer 1

真正的技巧是能够利用 D3 中所有内置的时间格式/间隔工具。这是一个非常简单的示例，基于 this block ，您可以在其中使用 d3.time.scale().nice() 定义一整天(24 小时)的时间尺度。 :

// 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")));

上面的代码生成这个轴: