我正在开发一个项目,为当地城市组织构建分析仪表板,以便可视化有关移动应用用户的基本统计信息。我一直在使用dc.js库来构建链接图表,并且在初始仪表板上取得了一些进展,但是在生成折线图时遇到了麻烦。这个问题看起来类似于张贴here条形图的问题。
以下是数据的一部分:
unique_id,dates,purpose,num,wday,epoch
1,10/10/2012,Commute,1,2day,1349827200
2,10/11/2012,Commute,4,3day,1349913600
5,10/12/2012,Commute,13,4day,1350000000
11,10/13/2012,Commute,1,5day,1350086400
16,10/14/2012,Commute,1,6day,1350172800
22,10/15/2012,Commute,14,0day,1350259200
26,10/16/2012,Commute,44,1day,1350345600
32,10/17/2012,Commute,60,2day,1350432000
39,10/18/2012,Commute,34,3day,1350518400
47,10/19/2012,Commute,47,4day,1350604800
55,10/20/2012,Commute,3,5day,1350691200
63,10/21/2012,Commute,4,6day,1350777600
69,10/22/2012,Commute,56,0day,1350864000
77,10/23/2012,Commute,63,1day,1350950400
85,10/24/2012,Commute,77,2day,1351036800
93,10/25/2012,Commute,55,3day,1351123200
100,10/26/2012,Commute,54,4day,1351209600
每一行包含一个具有唯一身份证,旅行日期,旅行目的的自行车旅行,以及表示与特定旅行类别分组相关的旅行次数(即有关目的的“通勤”旅行的旅行次数) “2012年10月23日”)。这是与生成折线图相关的代码。
var timeChart = dc.linechart("#time-chart")
d3.csv("trips2.csv", function(data) {
var dateFormat = d3.time.format("%m/%d/%Y");
var numberFormat = d3.format(".2f");
data.forEach(function(d) {
d.dd = dateFormat.parse(d.dates);
d.month = d3.time.month(d.dd);
d.day = d3.time.day(d.dd);
d.year = d.dd.getFullYear();
d.num = +d.num;
d.purpose = d.purpose;
});
var facts = crossfilter(data);
var dateDimension = facts.dimension(function(d) {
return d.dd;
});
minDate = dateDimension.bottom(1)[0];
maxDate = dateDimension.top(1)[0];
var numberByDate = dateDimension.group().reduceSum(function(d) { return d.num; });
timeChart
.renderArea(true)
.width(900)
.height(300)
.brushOn(false)
.dimension(dateDimension)
.group(numberByDate)
.x(d3.time.scale().domain([minDate, maxDate]))
.xUnits(d3.time.day)
.renderHorizontalGridLines(true)
.elasticX(true)
.elasticY(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
.yAxisLabel("Number of Cyclists");
dc.renderAll();
我认为我的困惑源于按日期分组计数的map-reduce功能。任何帮助将不胜感激。这是结果图表的屏幕截图。
编辑:不确定这会有多大帮助,但这里有完整代码的要点:http://gist.github.com/kylejshaffer/1f826e09f90698434445。无法在bl.ocks.org网站上获取图表,但也有代码链接:http://bl.ocks.org/kylejshaffer/1f826e09f90698434445。
答案 0 :(得分:3)
我认为您的第一步是与浏览器的调试器(例如Chrome中的开发者工具)保持密切友好。
这是你的要点的一个分支,添加了colorbrewer.js并删除了一个2.0属性,这个属性在你链接到的dc.js版本中不可用:
http://bl.ocks.org/gordonwoodhull/749621d8d22097cf29e9
正如我在FAQ中提到的那样,我在图表开始加载之前设置了一个调试器断点,并查看了一些值。
这些行:
minDate = dateDimension.bottom(1)[0];
maxDate = dateDimension.top(1)[0];
获取记录,而不是日期。更改它们以从记录中读取日期字段:
minDate = dateDimension.bottom(1)[0].day;
maxDate = dateDimension.top(1)[0].day;
..至少要在轴上显示一些日期,但没有项目。所以你只是以这种方式继续下去:
group.all()
函数是否会返回您的期望? Etc等,“调试直到完成。”
希望这有帮助!