Многосерийная линейная диаграмма с использованием DC.JS

Question

Я работаю над проектом по созданию аналитической панели для местной городской организации, чтобы визуализировать основную статистику о пользователях мобильного приложения. Я использовал библиотеку dc.js для создания связанных диаграмм и добился определенных успехов на начальной панели, но у меня возникли проблемы при создании линейной диаграммы. Эта проблема, похоже, похожа на ту, что выложена здесь с гистограммами.

Вот часть данных:

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

Каждая строка содержит поездку на велосипеде с уникальным идентификатором, датой поездки, целью поездки и номером, который обозначает, сколько поездок относится к этой конкретной группе категорий поездок (т. Е. Поездки, которые были для цели "добираться" на дату "10/23/2012"). Вот код, который имеет отношение к созданию линейного графика.

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

Я думаю, что моя путаница проистекает из картографических функций группировки отсчетов по дате. Любая помощь будет принята с благодарностью. Вот скриншот полученного графика.

РЕДАКТИРОВАТЬ: не уверен, насколько это полезно, но есть полный список кода доступен здесь: http://gist.github.com/kylejshaffer/1f826e09f90698434445. Не удается получить графики для отображения на сайте bl.ocks.org, но там также есть ссылка на код: http://bl.ocks.org/kylejshaffer/1f826e09f90698434445.

Answer 1

Я думаю, что ваш первый шаг - поближе познакомиться с отладчиком вашего браузера (например, Developer Tools in 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() функции возвращают то, что вы ожидаете?
• Работают ли средства доступа, когда вы запускаете их вручную для элементов сокращенных групп в консоли отладчика?

И т. Д., "Отладка до завершения".

Надеюсь это поможет!