dc.js графике - выпуск Дата валютирования

Итак, я создал базовую диаграмму линии, где х = месяцев и у = значения в соответствии с ниже CSV:dc.js графике - выпуск Дата валютирования

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>

Я попросил показать только «Прогулка», и результат показывает месяцы в порядке в правильном порядке. Проблема, с которой я сталкиваюсь, заключается в том, что первый месяц добавляет 835 к результату. Это сумма всех «num», где «цель» = «коммутировать».

См рис здесь: http://tinypic.com/r/qx9kih/8

Любые идеи, где я неправильно?

источник

2015-09-28 stutray

Функции доступа к размерности 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; }; 
});

Другими словами, делать фильтрацию в функции суммы аксессора, а не функции измерения аксессора.

источник

2015-09-28 13:23:00

Hi Ethan, Большое спасибо за то, что этот подход понятен. Результаты теперь точно так, как ожидалось. Теперь имеет смысл отфильтровать сумму. Ваша помощь очень ценится. – stutray

Рад, что это помогло! Было бы неплохо, если бы Crossfilter крикнул бы кровавое убийство, когда адепторы действуют так, но трудно точно определить, когда эта ситуация произойдет. К сожалению, он продолжает регулярно укушать относительно новых пользователей. Будет продолжать думать об этом. –

Да, я пока не совсем готов к скорости. В другой точке с немного другим набором данных я добавил вторую группу, используя тот же метод группировки и размерности. Добавил его как стек к диаграмме. Он отображает обе линии, но масштаб удваивается (на 2-й группе), где перекрываются месяцы 1-й группы и 2-й группы (1-я группа имеет данные Apr-Sep, 2nd Group - Apr-Mar). Это потому, что я использую тот же Dim? – stutray

dc.js графике - выпуск Дата валютирования

ответ

Смежные вопросы