Question

好的，所以我创建了一个基本折线图，其中x = months和y =值，如下所示：

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返回自然排序的值，而您的值不会。如果值不是自然排序的，则组计算随机开始，包括不正确的记录。尝试将维度更改为：

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; };
});

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

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

1 个答案: