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

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

Multiple layers with dc.js series charts

d3.js

crossfilter

dc.js