DC.js堆疊折線圖不起作用

Question

是否有更完整的教程或指南來創建使用dc.js的圖表而不是documentation中提供的圖表？我正嘗試創建一個帶有2個堆疊層次的簡單折線圖。我利用以下的CSV：

我想WasteDate是在x軸和WasteData是在y軸。此外，我希望一層是WasteFunction Minimization，另一個是WasteFunction Disposal。這應該給我的東西像下面的（非常粗略地）：

現在，據我瞭解，我需要使用crossfilter創建爲x軸的尺寸，然後過濾尺寸爲我2棧。

爲x軸的尺寸將日期：

// 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; 

然後，我需要爲y軸的尺寸，然後篩選它爲每個我的書庫的？

// 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概念來有效地使用dc.js。 Crossfilter有very strong documentation，但它也非常密集，你必須多讀幾次。

歡迎加入我們的dc.js user group如果你想通過它來獲得更好的理解。獲得這個想法需要一段時間，但這是值得的！