在 DC.js 中呈现多折线图

Question

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

我的代码现在有点乱，但本质上，我有两个等值线，我想根据等值线数据渲染一个多线图表——我只是不知道如何整理数据以制作有用。

折线图是复合折线图。一行是纽约客流通量数据，另一行是周六晚上 Post 流通量数据。 y轴为issue_circulation，x轴为actual_issue_date

在当前的实现中，我设置了两个交叉过滤器（每个数据集一个），我正在为等值线图创建一个维度，一个为折线图创建维度。等值线渲染正确，但我还没有渲染折线图。我不知道是因为我的数据格式 ({key: date, value: y-axis-value}) 还是我的 crossfilter 实现太简陋了。我试图根据其他 Whosebug 问题来理解，但我尝试过的任何事情似乎都没有用（这包括像我现在所做的那样预过滤数据，创建两个不同的交叉过滤器和单独的维度，试图细致地分开解析日期，等）

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)

这看起来有点混乱，因为星期六晚上 Post 数据每周波动很大：

放大：

假设这不是数据清理问题（有点像？），改进显示的一种方法是按月汇总：

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.

在 DC.js 中呈现多折线图

Rendering a multi-line chart in DC.js

javascript

data-visualization

d3.js

crossfilter

dc.js