通过Ajax将原始数据添加到dc.js复合图表的简单方法

Question

我有2个折线图的复合图表，但我需要添加第三个图表。

第三张图表将具有以下独特属性：

• 数据将通过ajax调用进入，并作为二维数组[[timestamp，value]，[timestamp，value] ...]
提供
• 每个新的ajax调用都需要替换前一个
的值
• 不需要尊重任何过滤器，也不会在任何其他图表上使用
• 然而，它需要使用不同比例的Y轴..（并在右侧标记）

这是图表目前仅使用两个图表的方式

这是我的代码，第三行图的开头......假设我有一些新数据可用，我有点失去最好/最简单的方法来处理这个问题。

timeChart
    .width(width).height(width*.333)
    .dimension(dim)
    .renderHorizontalGridLines(true)
    .x(d3.time.scale().domain([minDate,maxDate]))
        .xUnits(d3.time.months)
        .elasticY(true)
        .brushOn(true)
        .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5))
    .yAxisLabel(displayName)
    .compose([
      dc.lineChart(timeChart)
      .colors(['blue'])
      .group(metric, "actual" + displayName)
      .valueAccessor (d) -> d.value.avg
      .interpolate('basis-open')
      .dimension(dim),
    dc.lineChart(timeChart)
      .colors(['red'])
      .group(metric, "Normal " + displayName)
      .valueAccessor (d) -> d.value.avg_avg
      .interpolate('basis-open'),
     dc.lineChart(timeChart)
        .colors(['#666'])
        .y()#This needs to be scaled and labeled on the right side of the chart
        .group() #I just want to feed a simple array of values into here
     ])

另外注意：我已经注意到我可能是传说渲染的小错误。正如您在图例中看到的那样，两者都有相同的标签，但我在第二个.group（）参数中使用了不同的字符串。

Answer 1

我相信你在这里问几个问题。我将尝试回答主要问题：如何将数据添加到直流图表中。

我在这里创建了一个示例：http://jsfiddle.net/djmartin_umich/qBr7y/

在这个例子中，我只是将随机数据添加到交叉过滤器中，尽管这可以很容易地适应从服务器提取数据：

function AddData(){
  var q = Math.floor(Math.random() * 6) + 1;
  currDate = currDate.add('month', 1);
  cf.add( [{date: currDate.clone().toDate(), quantity: q}]);  
  $("#log").append(q + ", ");
}

我每秒调用一次这个方法。完成后，我重置x域并重绘图表。

window.setInterval(function(){
  AddData();
  lineChart.x(d3.time.scale().domain([startDate, currDate]));
  dc.redrawAll();
}, 1000);

我建议在尝试添加多个y轴刻度的复杂性之前尝试将其单独工作。

Answer 2

目前，您最好的选择是创建一个假团体。实际上图表上的.data方法应该这样做，但它对于从堆栈mixin派生的图表不起作用。

https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted