使用 dc.js 将堆叠折线图转换为多折线图（未堆叠）答案

【问题标题】：Convert stacked line chart to multiple line chart(not stacked) using dc.js使用 dc.js 将堆叠折线图转换为多折线图（未堆叠）
【发布时间】：2019-08-07 07:30:17
【问题描述】：

我正在使用 dc.js 创建多个折线图。我创建了一个堆栈图，我想将其更改为多折线图。

例如，目前这里的线叠加，我希望它们不要叠加，而是应该像系列图一样流动（它可以根据数据相互覆盖）。

我使用下面的代码在图表中渲染堆栈

for(let key in curr) {
   if(index === 0) {
      subscriptionChart.group(curr[key], key)
   } else {
      subscriptionChart.stack(curr[key], key)
   }
}

我在下面添加一个 JS 小提琴，请帮助我。谢谢。

Stack chart JS Fiddle

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

我认为您的问题的核心是：真的需要完全不同的数据格式来绘制系列图表而不是堆叠图表吗？

不幸的是，答案是“是”。

请尝试将transformedSubscriptionData 展平，使其每行有一个“多键”和一个值，例如当前转换后的数据的第三行将扩展为：

[
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'canceled', count: 22},
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'active', count: 2},
   {date: Thu Mar 07 2019 10:06:25 GMT-0500, result: 'skip', count: 10},
   ...
]

那么从series chart example如何生成该图表应该很明显了。

重要的设置是

chart.seriesAccessor(d => d.result)

使用上面详述的新结果列。

如果您遇到问题，请在您的问题中添加一个部分，我们可以对其进行迭代。

【讨论】：

您能告诉我如何将 y 轴起始刻度 0 起始位置稍微向上定位吗？
当您在 Stack Overflow 上获得解决您问题的答案时，请点击绿色复选标记接受答案。
你的意思是，改变Y域，让空间多一点，并显示一点负Y？最简单的方法是更改最小 Y 的计算，例如subscriptionChart.yAxisMin = function() { return -4; }; 但是，该区域只会从零开始填充，因为那是真正的零。