DC.js叠加线图不工作

Question

是否有更完整的教程或指南使用dc.js创建图表，而不是在其文档中提供什么？我试图创建一个简单的线条图与两个叠加的水平。我正在使用以下csv：

​

​

我希望WasteDate在x轴上，WasteData在y轴上。此外，我希望一个层是WasteFunction最小化的层，另一个层是WasteFunction处理层。这应该会给我以下(非常粗略)的东西：

​

​

现在，据我所知，我需要使用十字过滤器为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没有太多的文档。有人可以写一本书，但它还没有发生。人们主要依靠示例来开始，而带注释的股票示例是一个很好的第一次阅读。

代码中最大的问题是，这些不是交叉过滤器组。您确实需要学习交叉过滤器的概念，才能有效地使用dc.js。交叉过滤器有非常强大的文档，但它也非常密集，您必须阅读它几次。

如果你想和我们谈一谈，以获得更好的理解，欢迎加入我们的dc.js用户组。这确实需要一段时间才能得到这个想法，但它是值得的！