DC.js Stacked Line Chart не работает

Question

Есть ли более полное руководство или руководство по созданию диаграмм с dc.js, чем то, что предлагается в их documentation? Я пытаюсь создать простую линейную диаграмму с двумя уровнями. Я используя следующий формат CSV:

Я хочу WasteDate быть на оси х и WasteData быть на оси у. Кроме того, я хочу, чтобы один слой был из Minimization WasteFunction, а другой - для утилизации отходов. Это должно дать мне что-то вроде следующего (очень грубо):

Теперь, как я понимаю, мне нужно создать измерение для оси х с помощью crossfilter, а затем отфильтрованного размер для моих 2 стеки.

Размерность для оси х будет даты:

// dimension by month 
var Date_dim = ndx.dimension(function (d) { 
    return d.WasteDate; 
}); 

// Get min/max date for x-axis 
var minDate = Date_dim.bottom(1)[0].WasteDate; 
var maxDate = Date_dim.top(1)[0].WasteDate; 

Тогда мне нужно создать измерение для оси у, а затем процеживают для каждого из моих стеков?

// WasteType dimension 
var WasteFunction_dim = ndx.dimension(function (d) { 
    return d.WasteFunction; 
}); 

// Minimisation Filter 
var WasteFunction_Disposal = WasteFunction_dim.filter("Disposal"); 

// Disposal Filter 
var WasteFunction_Minimisation = WasteFunction_dim.filter("Minimisation"); 

Тогда я должен быть в состоянии использовать их для настройки диаграммы:

moveChart 
    .renderArea(true) 
    .width(900) 
    .height(200) 
    .dimension(Date_dim) 
    .group(WasteFunction_Minimisation, 'Minimisation') 
    .stack(WasteFunction_Disposal, 'Disposal') 
    .x(d3.time.scale().domain([minDate, maxDate])); 

Теперь я не могу получить прошли эту ошибку на RenderAll() функции:

---

Полный код:

< script type = "text/javascript" > 
 

 
    $(document).ready(function() { 
 

 
    var moveChart = dc.lineChart('#monthly-move-chart'); 
 

 
    d3.csv('minimisation-vs-disposal.csv', function(data) { 
 
     /* format the csv file a bit */ 
 
     var dateFormat = d3.time.format('%d/%M/%Y'); 
 
     var numberFormat = d3.format('.2f'); 
 

 
     data.forEach(function(d) { 
 
     d.dd = dateFormat.parse(d.WasteDate); 
 
     d.WasteData = +d.WasteData // coerce to number 
 
     }); 
 

 
     // Cross Filter instance 
 
     var ndx = crossfilter(data); 
 
     var all = ndx.groupAll(); 
 

 
     // dimension by month 
 
     var Date_dim = ndx.dimension(function(d) { 
 
     return d.WasteDate; 
 
     }); 
 

 
     // Get min/max date for x-axis 
 
     var minDate = Date_dim.bottom(1)[0].WasteDate; 
 
     var maxDate = Date_dim.top(1)[0].WasteDate; 
 

 
     // Waste Data dimension 
 
     var WasteData_dim = ndx.dimension(function(d) { 
 
     return d.WasteData; 
 
     }); 
 

 
     // WasteType dimension 
 
     var WasteFunction_dim = ndx.dimension(function(d) { 
 
     return d.WasteFunction; 
 
     }); 
 

 
     // Minimisation Filter 
 
     var WasteFunction_Disposal = WasteFunction_dim.filter("Disposal"); 
 

 
     // Disposal Filter 
 
     var WasteFunction_Minimisation = WasteFunction_dim.filter("Minimisation"); 
 

 
     moveChart 
 
     .renderArea(true) 
 
     .width(900) 
 
     .height(200) 
 
     .transitionDuration(1000) 
 
     .dimension(Date_dim) 
 
     .group(WasteFunction_Minimisation, 'Minimisation') 
 
     .stack(WasteFunction_Disposal, 'Disposal') 
 
     .x(d3.time.scale().domain([minDate, maxDate])); 
 

 
     dc.renderAll(); 
 
    }); 
 
    }); 
 

 
< /script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="monthly-move-chart"> 
 
    <strong>Waste minimisation chart</strong> 
 
</div>

Answer 1

Это правда, dc.js не имеет много документации. Кто-то мог написать книгу, но этого не произошло. Люди в основном полагаются на примеры для начала, и annotated stock example хорошо читается.

Самая большая проблема в вашем коде заключается в том, что они не являются группами crossfilter. Вам действительно нужно изучить концепции crossfilter, чтобы эффективно использовать dc.js. Crossfilter имеет very strong documentation, но он также очень плотный, и вам придется прочитать его несколько раз.

Не стесняйтесь присоединяйтесь к нам по адресу dc.js user group, если вы хотите поговорить с ним, чтобы лучше понять. Это займет некоторое время, чтобы получить эту идею, но она того стоит!