gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 16:48:09 25 4
gpt4 key购买 nike

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

我有这项服务,它可以统计我的网站每分钟的点击次数,我想使用 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 轴上得到所有随机标签。

screenshot

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

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

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

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

最佳答案

真正的技巧是能够利用 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")));

上面的代码生成这个轴:

enter image description here

关于javascript - 如何使用 d3.time.scale 为一天中的每一小时和一周中的每一天创建标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26926876/

25 4 0