具有dc.js系列图表的多个图层

Question

我很难让dc.js的情节发挥作用。数据对象包含2个值字段，我需要将val指定为 scatterPlot ，将smooth指定为 lineChart 。以下示例和jsfiddle here。

<div id="series-chart"></div>

<style>div{ display: inline; }</style>

<script>

var datum = [
  {date: "2018-01-01T00:00:00Z", val: 0, smooth: 3, type: "set1"},
  {date: "2018-01-02T00:00:00Z", val: 7, smooth: 4, type: "set1"},
  {date: "2018-01-03T00:00:00Z", val: 1, smooth: 6, type: "set1"},
  {date: "2018-01-04T00:00:00Z", val: 4, smooth: 8, type: "set1"},
  {date: "2018-01-05T00:00:00Z", val: 8, smooth: 11, type: "set1"},
  {date: "2018-01-06T00:00:00Z", val: 15, smooth: 14, type: "set1"},
  {date: "2018-01-07T00:00:00Z", val: 12, smooth: 17, type: "set1"},
  {date: "2018-01-08T00:00:00Z", val: 20, smooth: 20, type: "set1"},
  {date: "2018-01-01T00:00:00Z", val: 15, smooth: 12, type: "set2"},
  {date: "2018-01-02T00:00:00Z", val: 10, smooth: 11, type: "set2"},
  {date: "2018-01-03T00:00:00Z", val: 14, smooth: 9, type: "set2"},
  {date: "2018-01-04T00:00:00Z", val: 7, smooth: 7, type: "set2"},
  {date: "2018-01-05T00:00:00Z", val: 12, smooth: 5, type: "set2"},
  {date: "2018-01-06T00:00:00Z", val: 8, smooth: 4, type: "set2"},
  {date: "2018-01-07T00:00:00Z", val: 8, smooth: 3, type: "set2"},
  {date: "2018-01-08T00:00:00Z", val: 5, smooth: 2, type: "set2"}

];
var data = crossfilter(datum);
var typeSeriesDimension = data.dimension(function(d){ return [d.type, new Date(d.date)]; });
var totalGroupRaw    = typeSeriesDimension.group().reduceSum(function(d){ return d.val; });
var totalGroupSmooth = typeSeriesDimension.group().reduceSum(function(d){ return d.smooth; });

var composite = dc.compositeChart("#series-chart");

composite
  .width(400)
  .height(400)
  .x(d3.time.scale().domain([new Date("2018-01-01T00:00:00Z"), new Date("2018-01-08T00:00:00Z")]))
  .dimension(typeSeriesDimension)
  .compose([
    dc.lineChart(composite)
      .dimension(typeSeriesDimension)
      .group(totalGroupSmooth)
      // .seriesAccessor(function(d) {return d.key[0];})
      .keyAccessor(function(d) {return d.key[1];})
      .valueAccessor(function(d) {return d.value;}) ,

    dc.scatterPlot(composite)
      .dimension(typeSeriesDimension)
      .group(totalGroupRaw)
      // .seriesAccessor(function(d) {return d.key[0];})
      .keyAccessor(function(d) {return d.key[1];})
      .valueAccessor(function(d) {return d.value;})
  ])
  .legend(dc.legend().x(100).y(10).itemHeight(20).gap(5));


dc.renderAll();

</script>

如果没有seriesAccessor，分类颜色映射不起作用，并且取消注释这些行导致脚本失败：

Uncaught TypeError: dc.lineChart(...).dimension(...).group(...).seriesAccessor is not a function

此外，由于某些原因我不能以错误的顺序建立绘图。

全面失败。任何帮助非常感谢！

Answer 1

这个维度对于散点图是有意义的，但它对折线图没有意义。

折线图希望有像日期这样的简单标量键。但是散点图需要具有[type, Date]之类的2D键。

幸运的是，如果复合图表的子图表使用不同的维度，那么复合图表并不是很清楚。

因此，定义一个新的时间维度并将其用于折线图的组：

var timeSeriesDimension = data.dimension(function(d) { return new Date(d.date);})
var totalGroupSmooth = timeSeriesDimension.group().reduceSum(function(d){ return d.smooth; });

从折线图中删除键和值访问器，因为现在默认行为正常：

  //.keyAccessor(function(d) {return d.key[1];})
  //.valueAccessor(function(d) {return d.value;}) ,

至于seriesAccessor，这只与dc.seriesChart一起使用，所以我担心它不会在这里帮到你。可能有可能将散点图与系列图表结合起来，因为系列图表只是复合图表的一个特化，但我还没有尝试过 - 而我宁愿把它留下来另一个问题，如果你想尝试一下。