如何使用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如何工作
,我一直在这个
真正的窍门是能够利用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屋!