带有 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] 这样的二维键。

幸运的是，复合图表并不介意其子图表是否使用不同的维度。

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

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一起使用，这里恐怕帮不了你。可能可以将散点图与系列图结合起来，因为系列图只是复合图的一个特化，但我没有尝试过——如果你想尝试的话，我宁愿把它留给另一个问题出去。