Question

为什么我的lineChart会在xAxis中显示月份而不是星期日？

感谢您的帮助=）

这是我的代码：

var hitslineChart = dc.lineChart（“＃chart-line-hitsperday”）;

var data = [
        {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100},
        {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100},
        {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200},
        {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1},
        {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0},
        {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1},
        {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100}
        ];

var ndx = crossfilter(data);
var parseDate = d3.time.format("%m/%d/%Y").parse;
data.forEach(function(d) {
    d.date = Date.parse(d.date);
    d.total= d.http_404+d.http_200+d.http_302;
});

var dateDim = ndx.dimension(function(d) {return d.date;});
var hits = dateDim.group().reduceSum(function(d) {return d.total;});
var minDate = dateDim.bottom(1)[0].date;
var maxDate = dateDim.top(1)[0].date;

hitslineChart
    .width(500).height(200)
    .dimension(dateDim)
    .group(hits)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xAxis().ticks(5)
    .yAxisLabel("Hits per day");

dc.renderAll();![the result][1]

xAxis的结果是：Thu27-Fri28-Sat29-Dec30-Mon31-2013-Wed02-Thu03-Fri04-Sat05-Jan06 ...

Answer 1

1）您需要使用日期格式化程序解析传入的数据：

d.date = Date.parse(d.date); \\ Old
d.date = parseDate.parse(d.date); \\ New

这将明确匹配输入数据的格式。

2）如果您希望按天分组数据，则需要在维度中指定。 d3.time.day帮助程序方法将所提供数据的时间设置为00:00:00。这样可以将数据组组合在一起：

var dateDim = ndx.dimension(function(d) {return d.date;}); \\old
var dateDim = ndx.dimension(function(d) {return d3.time.day(d.date);}); \\ new

目前尚不清楚您是否希望每天（1月1日，1月2日，1月3日等）或每周一点（周日，周一，周二）。 d3.time.day方法按日历日对日期进行分组。

3）您可以使用以下方法指定刻度线格式：

.xAxis().tickFormat(function(v) {return displayDate(v)});

有关时间格式的详细信息，请访问https://github.com/mbostock/d3/wiki/Time-Formatting。

这是一个jsfiddle，可以调整您的代码以在x轴上显示星期几： http://jsfiddle.net/djmartin_umich/6V4Ey/

我希望这有帮助！ -DJ

lineChart xAxis日期错误

1 个答案: