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

问题描述

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

我有这个服务，给我的点击我的网站每分钟，我想在仪表板使用d3 nvd3线图。

除了一件事，我都有工作，我想要x axsis上的标签从午夜到午夜。

（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如何工作，我一直在这个

h2_lin>解决方案

真正的窍门是能够利用D3中所有内置的时间格式化/间隔工具。以下是一个非常简单的示例，它基于此块，您可以在其中定义整个时间范围一天（24小时），使用 d3.time。 scale（）。nice（） ：

  //设置SVG 
 var svg = d3.select（body）。append（svg）
 .attr（width，width）
 .attr（height，height）; 
 
 //定义时间标度
 var x = d3.time.scale（）
 .domain（[new Date，new Date]）
 .nice d3.time.day）
 .range（[0，width  -  50]）; 
 
 //添加轴
 svg.append（g）
 .attr（transform，translate（5,0））
。 call（d3.svg.axis（）。scale（x）.ticks（24）.tickFormat（d3.time.format（％H：％M）））; 
  

上述代码生成此轴：

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

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.

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

(00:00 to 23:00) and in intervals of 1hr [00:00, 01:00, 02:00, 03:00, 04:00, ......22:00, 23:00]

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.

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

pls help

thanks a lot

解决方案

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

The above code produces this axis:

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