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

Question

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

我有这项服务，每分钟给我的网站点击数，我想使用d3 nvd3线图在仪表板中显示它。

除了一件事我完全工作了，我希望x axsis上的标签从午夜到午夜开始

(00:00 to 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 works是怎样的，自昨天以来我一直在研究这个问题

请帮助

非常感谢

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

以上代码生成此轴：