Question

我正在开发一个项目，为当地城市组织构建分析仪表板，以便可视化有关移动应用用户的基本统计信息。我一直在使用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功能。任何帮助将不胜感激。这是结果图表的屏幕截图。 enter image description here

编辑：不确定这会有多大帮助，但这里有完整代码的要点：http://gist.github.com/kylejshaffer/1f826e09f90698434445。无法在bl.ocks.org网站上获取图表，但也有代码链接：http://bl.ocks.org/kylejshaffer/1f826e09f90698434445。

Answer 1

我认为您的第一步是与浏览器的调试器（例如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等，“调试直到完成。”

希望这有帮助！

使用DC.JS的多系列折线图

1 个答案: