dc.js 折线图 - 日期值问题

Question

好的，所以我创建了一个基本折线图，其中 x = 月和 y = 根据以下 CSV 的值：

dates,purpose,num
01/04/2015,Commute,1
01/05/2015,Commute,15
01/06/2015,Commute,48
01/07/2015,Commute,4
01/08/2015,Commute,4
01/09/2015,Commute,52
01/10/2015,Commute,163
01/11/2015,Commute,222
01/12/2015,Commute,126
01/01/2016,Commute,174
01/02/2016,Commute,11
01/03/2016,Commute,15
01/04/2015,Walk,0
01/05/2015,Walk,600
01/06/2015,Walk,13
01/07/2015,Walk,1
01/08/2015,Walk,1
01/09/2015,Walk,14
01/10/2015,Walk,44
01/11/2015,Walk,60
01/12/2015,Walk,34
01/01/2016,Walk,47
01/02/2016,Walk,3
01/03/2016,Walk,900

HTML如下：

<head>
    <title>dc.js - Line Chart Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
    </head>
    <body>

    <div id="test"></div>

    <script type="text/javascript" src="../js/d3.js"></script>
    <script type="text/javascript" src="../js/crossfilter.js"></script>
    <script type="text/javascript" src="../js/dc.js"></script>
    <script type="text/javascript">

    var Chart5 = dc.lineChart("#test");
    d3.csv("morley3.csv", function(data) {

    var dateFormat = d3.time.format("%d/%m/%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.month;});

    var dateDimension2 = facts.dimension(function(d) { if (d.purpose == "Walk") {return d.month;}});
    var numberByDate2 = dateDimension2.group().reduceSum(function(d) { return d.num; }); 

    minDate = dateDimension2.bottom(1)[0];
    maxDate = dateDimension2.top(1)[0];

    Chart5
    .renderArea(true)
    .width(900)
    .height(300)
    .renderArea(false)
    .brushOn(false)
    .dimension(dateDimension2)
    .group(numberByDate2)
    .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))
    .valueAccessor(function (d) {return d.value;}) // What does this do?
    .yAxisLabel("")
    .xAxis();
    dc.renderAll();
    });

    </script>
    </body>
    </html>

我要求只显示 "Walk"，结果以正确的顺序显示月份。我遇到的问题是第一个月的结果增加了 835。这是所有 "num" 的总和，其中 "purpose" = "Commute".

请看这里的图片：http://tinypic.com/r/qx9kih/8

我哪里出错了？

Answer 1

维度访问函数 must return 值自然排序，而你的没有。如果值不是自然排序的，则组计算会随机开始，包括不正确的记录。尝试将尺寸更改为：

var dateDimension2 = facts.dimension(function(d) { return d.month; });
var numberByDate2 = dateDimension2.group().reduceSum(function(d) {
   if (d.purpose == "Walk") { return d.num } else { return 0; };
});

换句话说，在求和访问函数而不是维度访问函数中进行过滤。

dc.js 折线图 - 日期值问题

dc.js line chart - Date Value issue

d3.js

dc.js