dc.js / crossfilter维度(年/周) [英] dc.js / crossfilter dimensions (year / week)

查看:285
本文介绍了dc.js / crossfilter维度(年/周)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我无法按周(以及不同年份)显示资料群组。



伪SQL会提供:

 按'year','week'(也许以后的site)选择sum('task')

我的数据看起来或多或少像这样:

  {date:20150427,week:18,site:atask:3,} 
{date:20150427 week:18,site:btask:4,}
{date:20150427,week:18,site:ctask:2 ,}
{date:20150427,week:18,site:dtask:3,}
{date:20150428,week :18,site:btask:3,site:atask:3,}
{date:20150428 }
{date:20150429,week:18,site:ctask:2,}
{date:20150429 :18,site:dtask:3,}
{date:20140512,week:20,site:dtask:6,
{date:20140512,week:20,site:atask:6,}
{date:20140513,week 20,site:btask:4,}
{date:20140513,week:20,site:ctask:1, b $ b {date:20140519,week:21,site:btask:2,}
{date:20140519,week:21 ,site:ctask:1,}
{date:20140519,week:21,site:dtask:3,}
{date:20140519,week:21,site:atask:1,}
{date:20140520,week site:btask:2,}
{date:20140520,week:21,site:ctask:3,}
{date:20140520,week:21,site:dtask:1,}
{date:20140520,week:21, site:atask:1,}

这是我的数据样本,它可以有不同的年份,网站或任务



我试过这个,它不工作,因为barChart累积所有年份的一周:

  d3.json(/ graph,function(dataJson){


var dataTable = dc.dataTable (#dc-table-graph);
var barChart = dc.barChart(#chart-bar-ordersperweek);

var data = dataJson;
var dateFormat = d3.time.format(%Y%m%d);
data.forEach(function(d){d.date = dateFormat.parse(d.date);});


// dimension
var dateDim = ndx.dimension(function(d){return d.date;});
var weekDim = ndx.dimension(function(d){return d.week;});

// group
var orderByWD = weekDim.group()。reduceSum(function(d){return d.task;});


barChart
.width(1000).height(250)
.dimension(weekDim)
.group(orderByWD)
。 x(d3.scale.ordinal()。domain(d3.range(minWeek.week-1,maxWeek.week + 1)))
.xUnits(dc.units.ordinal)
.y d3.scale.linear()。domain([0,6000]))
.margins({top:20,right:30,bottom:50,left:80})
.label (d){return d.value})
;


dataTable.width(800).height(800)
.dimension(dateDim)
.group(function(d){return'Week'+ d .week})
.size(5000)
.columns([
function(d){var format = d3.format('02d');
return d.date .getFullYear()+'/'+ format(d.date.getMonth()+ 1)+'/'+ format(d.date.getDate());},
function(d){return d .week;},
function(d){return d.site;},
function(d){return d.task;}
])
.sortBy (d){return Number(d.date)+ d.task;})
.order(d3.descending);

dataTable.on('renderlet',function(chart){
chart.selectAll('。dc-table-group')。classed('info',true);
});

dc.renderAll();

我的目标是总计在同一周发生的所有任务,



在数据表中如何按网站按周分组累计任务(累计)?

/ p>

感谢任何帮助



EDIT
i添加了一个jsfiddle
https://jsfiddle.net/d4qsd8wh/

解决方案

我不知道我是否有问题,因为其他答案似乎解决不同的问题。我会假设你只是想问一下如何逐周工作,当字段上的周条目没有指定年份 - 所以你从不同的年份堆积成一个星期。



换句话说,我将此解释为您问题的核心:


我试过这个,工作,因为barChart累积所有年的一周


这不是真的关于dataTable,而是barChart。

要回答这个问题:是的,我认为你的 week 字段是无用的。相反,请使用解析的日期和 d3.time.week 按周分类:

  var weekDim = ndx.dimension(function(d){return d3.time.week(d.date);}); 

然后将条形图设置为使用日期单位而不是序数:

  barChart 
...
.x(d3.time.scale())
.xUnits(d3.time。周)
.elasticX(true)//或使用日期对象计算minWeek / maxWeek

d3.time.week 会像其他 d3时间间隔函数,返回在间隔开始的日期。 (由于 d3.time.week d3.time.sunday 的同义词,它会在星期日返回午夜每个日期 - 使用 d3.time.monday 如果你想要周一为基础的周。)将每个日期切换到其间隔的开始是一个很好的方式,



然后 d3.time.weeks (注意 s )是一个相关函数,可以计算任何时间范围内的间隔数(周)。 dc.js需要 xUnits 计数函数才能确定要显示的柱数。



我们得到了三个不同的问题的答案,你可能需要花一分钟时间细化下一个问题,以确保它是清楚的。


I can't make a correct graph showing the data group by week (and different years).

pseudo SQL would give:

select sum ('task')
group by 'year', 'week' (and maybe later 'site')

My data looks more or less like this:

{ "date" : "20150427", "week" : 18, "site" : "a" "task" : 3, } 
{ "date" : "20150427", "week" : 18, "site" : "b" "task" : 4, } 
{ "date" : "20150427", "week" : 18, "site" : "c" "task" : 2, } 
{ "date" : "20150427", "week" : 18, "site" : "d" "task" : 3, } 
{ "date" : "20150428", "week" : 18, "site" : "a" "task" : 3, } 
{ "date" : "20150428", "week" : 18, "site" : "b" "task" : 3, } 
{ "date" : "20150429", "week" : 18, "site" : "c" "task" : 2, } 
{ "date" : "20150429", "week" : 18, "site" : "d" "task" : 3, } 
{ "date" : "20140512", "week" : 20, "site" : "d" "task" : 6, } 
{ "date" : "20140512", "week" : 20, "site" : "a" "task" : 6, } 
{ "date" : "20140513", "week" : 20, "site" : "b" "task" : 4, } 
{ "date" : "20140513", "week" : 20, "site" : "c" "task" : 1, } 
{ "date" : "20140519", "week" : 21, "site" : "b" "task" : 2, } 
{ "date" : "20140519", "week" : 21, "site" : "c" "task" : 1, } 
{ "date" : "20140519", "week" : 21, "site" : "d" "task" : 3, } 
{ "date" : "20140519", "week" : 21, "site" : "a" "task" : 1, } 
{ "date" : "20140520", "week" : 21, "site" : "b" "task" : 2, } 
{ "date" : "20140520", "week" : 21, "site" : "c" "task" : 3, } 
{ "date" : "20140520", "week" : 21, "site" : "d" "task" : 1, } 
{ "date" : "20140520", "week" : 21, "site" : "a" "task" : 1, }

This is a sample of my data, it can have different years, sites or tasks

I tried this and it doesn't work, because the barChart cumulates the week of all years:

d3.json("/graph", function(dataJson) {


var dataTable = dc.dataTable("#dc-table-graph");
var barChart  = dc.barChart("#chart-bar-ordersperweek");

var data = dataJson;
var dateFormat = d3.time.format("%Y%m%d");
data.forEach(function (d) { d.date = dateFormat.parse(d.date); });


//dimension
var dateDim = ndx.dimension(function (d) { return d.date; });
var weekDim = ndx.dimension(function(d) {return d.week;});

//group
var orderByWD = weekDim.group().reduceSum(function (d) { return d.task; });


barChart
    .width(1000).height(250)
    .dimension(weekDim)
    .group(orderByWD)
    .x(d3.scale.ordinal().domain(d3.range(minWeek.week-1,maxWeek.week+1)))
    .xUnits(dc.units.ordinal)
    .y(d3.scale.linear().domain([0, 6000]))
    .margins({top: 20, right: 30, bottom: 50, left: 80})
    .label(function(d) { return d.value})
    ;


dataTable.width(800).height(800)
        .dimension(dateDim)     
        .group( function (d) { return 'Week ' + d.week} )
        .size(5000)
        .columns([
            function (d) { var format = d3.format('02d');
                return d.date.getFullYear() +'/'+ format(d.date.getMonth()+1) + '/' + format(d.date.getDate()); },
            function (d) { return d.week; },
            function (d) { return d.site; },
            function (d) { return d.task; }
        ])
        .sortBy( function (d) { return Number(d.date) + d.task; })
        .order(d3.descending);

        dataTable.on('renderlet', function(chart){
            chart.selectAll('.dc-table-group').classed('info',true);
        });

dc.renderAll();

My goal is to sum all task happened in same week and draw it to row chart and when I select a week that update the datatable with selected week.

In the dataTable how do I sum (cumulate) task by site grouped by week ?

Thanks for any help

EDIT i have add a jsfiddle https://jsfiddle.net/d4qsd8wh/

解决方案

I'm not sure if I've got the question right, since the other answers seem to be solving different problems. I will assume you're just asking how to get group-by-week to work when the week entry on your fields does not specify the year - so you get weeks from different years piled into one.

In other words I interpret this as the heart of your question:

I tried this and it doesn't work, because the barChart cumulates the week of all years

Which isn't really about the dataTable but the barChart.

To answer that question: yes, I think your week field is useless. Instead, use the parsed dates and d3.time.week to bin by week:

var weekDim = ndx.dimension(function(d) {return d3.time.week(d.date);});

Then set your bar chart to use date units instead of ordinals:

barChart
    ...
    .x(d3.time.scale())
    .xUnits(d3.time.weeks)
    .elasticX(true) // or calculate minWeek/maxWeek using date objects

What d3.time.week does, like the other d3 time interval functions, is return the date which is at the beginning of the interval. (Since d3.time.week is a synonym for d3.time.sunday, it returns midnight on the Sunday before each date - use d3.time.monday if you want Monday-based weeks instead.) Clipping each date to the beginning of its interval is a good way to bin the dates without forgetting the year they are a part of.

Then d3.time.weeks (notice the s) is a related function which can count the number of intervals (weeks) within any time range. dc.js needs an xUnits counting function in order to determine the number of bars to show.

Given that you've gotten answers to three different questions, you might want to spend a minute refining your next question to make sure it's clear.

这篇关于dc.js / crossfilter维度(年/周)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆