具有 d3.v3.js 范围的多系列折线图答案

【问题标题】：Multi-series Line Chart with d3.v3.js Ranges具有 d3.v3.js 范围的多系列折线图
【发布时间】：2013-12-04 22:53:46
【问题描述】：

我正在用d3.v3.js 创建一个multi-series line chart。

我正在尝试随时间绘制 4 个不同的数据系列。我的问题是数据的范围变化很大。我想知道如何调整我的数据以便显示所有内容？其中一个数据系列的数字很高，而另一个系列则被推到了图表的底部，基本上难以辨认。

我希望能够缩放我的数据，这样图表就不会出现可笑的歪斜。

示例数据集：

0: {date:2013-12-01, a:690558, b:68494, c:1886, d:0}    
1: {date:2013-12-02, a:607800, b:53720, c:1698, d:0}    
2: {date:2013-12-03, a:740914, b:86944, c:2896, d:0}    
3: {date:2013-12-04, a:885053, b:99616, c:3301, d:0}

如您所见，数据集 A > B > C > D（d 还没有真正被使用）

【问题讨论】：

标签： javascript math d3.js series graphing

【解决方案1】：

您可以为每条线设置多个 Y 刻度，然后例如将轴和刻度着色为与线相同的颜色以显示哪个是哪个。

【讨论】：

【解决方案2】：

这确实是一个设计问题，而不是编程问题，所以在这里并不完全合适。这取决于数据的性质和可视化的目标。还是……

您可以尝试使用 tomtomtom 建议的方法，使用多个轴。

您可以使用非线性比例，例如 d3.scale.sqrt 或 d3.scale.log。

或者，您可以将所有值转换为相对于选定时间点的百分比变化（通常，该时间是系列的开始）。这正是股票价格图表显示两只或多只股票之间比较的方式。 See example.

【讨论】：