如何使用d3.time.scale为一天的每个小时和一周的每一天创建标签 [英] how to use d3.time.scale to create label for each hour of day and each day of week

问题描述

好吧可能有这么多的重复对SO这个问题，我已经检查了几乎所有的人，但我不能回答弄明白我的追求

Ok there may be so many duplicates to this question on SO, i have checked almost all of them but i couldn't figure out answer to my quest

我有这样的服务，给，命中数到我的网站的每一分钟，我想用D3 nvd3线图仪表板中显示。

I have this service which gives, count of hits to my site every minute and i want to display it in dashboard using d3 nvd3 line graph.

我得到了，除了一件事所有的工作，我想在X axsis标签从午夜开始到午夜

I got all working except one thing, i want the labels on x axsis to start from midnight to midnight

（00:00至23:00），并在1小时间隔 [00:00，01:00，02:00，03 ：00，04:00，22：00 ...... 23:00]

但我没能得到这个权利我试图使用 d3.time.scale 所有可能的组合，但我没有得到它的权利，我得到x上的所有随机标签轴

But i am not able to get this right i tried all possible combinations using d3.time.scale but i am not getting it right i get all random labels on x axis

这是我目前正在使用该功能给那些随机值

this is the function i am currently using which give those random values

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

在我得到一天这种工作时间表，我想每周过的日子做到这一点。

After i get this timeline of day working, i would like to do this for per day of week too.

我真的无法弄清楚如何 d3.time.scale作品，我一直在做这个，因为昨天

i really can't figure out how d3.time.scale works , i have been working on this since yesterday

请帮助

非常感谢

推荐答案

真正的窍门是要能够采取的所有D3内置的时间格式/间隔工具的优势。这里是一个非常简单的例子，根据关此块，在那里你穿过的全部定义你的时间尺度一天（24小时），使用 d3.time.scale（ ）.nice（） ：

The real trick is to be able to take advantage of all the built-in time formatting/interval tools in D3. Here's a very simple example, based off this block, where you define your time scale across the entirety of one day (24 hours) using d3.time.scale().nice():

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

以上code产生此轴：

The above code produces this axis:

这篇关于如何使用d3.time.scale为一天的每个小时和一周的每一天创建标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！