在DC.js中渲染多折线图

Question

JSFiddle在这里：https://jsfiddle.net/ayyrickay/k1crg7xu/47/

我的代码现在有点混乱，但是从本质上来说，我有两个Choropleth，并且我想基于Choropleth数据绘制多折线图-我只是不知道如何处理数据以使其正常工作

折线图是复合折线图。一线是纽约客发行量数据，另一行是星期六晚邮报发行量数据。 y轴为issue_circulation，x轴为actual_issue_date

在当前的实现中，我设置了两个交叉过滤器（每个数据集一个），并为Choropleth创建了一个维度，为折线图创建了一个维度。弧度可以正确渲染，但是我还没有绘制折线图。我不能说这是因为数据格式（{key: date, value: y-axis-value}）还是我的crossfilter实施太麻烦了。我正在尝试根据其他StackOverflow问题进行理解，但是我尝试过的所有工作似乎都没有效果（这包括像我现在这样对数据进行预过滤，创建两个不同的交叉过滤器和单独的维度，尝试细致地解析日期，等）

Answer 1

在X轴上使用时间刻度时，组的键应为Date对象。因此，在创建尺寸和组时，无法将日期格式设置为字符串；而是只使用原始Date对象。

由于日期太慢，建议将其作为数据预处理步骤：

  data.forEach(function(d) {
    d.actual_issue_date = new Date(d.actual_issue_date);
  })

然后，您的维度键功能仅提取日期对象：

const dimension1 = title1Circulation.dimension(d => d.actual_issue_date)
const lineChartYear1 = title1Circulation.dimension(d => d.actual_issue_date)
const lineChartYear2 = title2Circulation.dimension(d => d.actual_issue_date)

这最终看起来有点混乱，因为“星期六晚报”数据每周波动很大：

放大：

假设这不是数据清理问题（看起来像这样吗？），改善显示效果的一种方法是按月汇总：

const circulationGroup1 = lineChartYear1.group(d => d3.timeMonth(d)).reduceSum(d => d.issue_circulation)
const circulationGroup2 = lineChartYear2.group(d => d3.timeMonth(d)).reduceSum(d => d.issue_circulation)
composite
  .xUnits(d3.timeMonths)

这会将组密钥向下舍入到每个月的开始，将每个月的所有值相加。

还是有点凌乱，但更好：

欢迎，您仍然需要做一些工作，但是无论如何，这就是为什么数据没有显示的原因！

Fork of your fiddle.