DC.js Stacked Line Chart无效

是否有更完整的教程或指南来创建dc.js的图表，而不是_2720206中提供的图表？我'm trying to create a simple line chart with 2 stacked levels. I'm正在使用以下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>