DC.js Stacked Line Chart无效

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。获得这个想法确实需要一段时间，但这是值得的！