javascript - 将大型数据集加载到 crossfilter/dc.js

Question

我构建了一个具有多个维度和组的交叉过滤器，以使用 dc.js 直观地显示数据。可视化的数据是自行车出行数据，每次出行都会加载进去，目前有超过75万条数据。我正在使用的 JSON 文件有 70 MB，并且只会随着我在未来几个月收到更多数据而增长。

所以我的问题是，如何使数据更精简以便更好地扩展？现在加载我的互联网连接大约需要 15 秒，但我担心一旦我有太多数据，它会花费太长时间。此外，我尝试(未成功)在数据加载时显示进度条/微调器，但我没有成功。

我需要的数据列是 start_date, start_time, usertype, gender, tripduration, meters, age .我已将我的 JSON 中的这些字段缩短为 start_date, start_time, u, g, dur, m, age所以文件较小。在交叉过滤器上，顶部有一个折线图，显示每天的总行程数。下面是星期几(根据数据计算)、月份(也计算)的行图，以及用户类型、性别和年龄的饼图。在其下方有两个条形图，分别表示开始时间(四舍五入到小时)和行程持续时间(四舍五入到分钟)。

该项目在 GitHub 上:https://github.com/shaunjacobsen/divvy_explorer (数据集在 data2.json 中)。我试图创建一个 jsfiddle 但它不起作用(可能是由于数据，甚至只收集 1,000 行并将其加载到带有 <pre> 标记的 HTML 中):http://jsfiddle.net/QLCS2/

理想情况下，只有顶部图表的数据会首先加载:这会很快加载，因为它只是按天计算的数据。然而，一旦进入其他图表，它就需要越来越多的数据来深入了解更精细的细节。关于如何让它发挥作用的任何想法？

Answer 1

我建议将 JSON 中的所有字段名称缩短为 1 个字符(包括“开始日期”和“开始时间”)。这应该会有所帮助。另外，请确保在您的服务器上打开了压缩。这样，发送到浏览器的数据将在传输过程中自动压缩，如果尚未打开，这应该会大大加快速度。

为了获得更好的响应能力，我还建议首先设置您的 Crossfilter(空)、所有维度和组以及所有 dc.js 图表，然后使用 Crossfilter.add() 将更多数据添加到您的 Crossfilter 中 block 。最简单的方法是将您的数据分成一口大小的 block (每个 block 几 MB)并连续加载它们。所以如果你使用的是d3.json，那么在上一次文件加载的回调中开始下一次文件加载。这会导致一堆嵌套的回调，这有点讨厌，但应该允许用户界面在数据加载时做出响应。

最后，有了这么多数据，我相信您会开始在浏览器中遇到性能问题，而不仅仅是在加载数据时。我怀疑您已经看到了这一点，并且您看到的 15 秒停顿至少部分出现在浏览器中。您可以通过在浏览器的开发人员工具中进行分析来检查。为了解决这个问题，您需要分析和识别性能瓶颈，然后尝试优化这些瓶颈。另外 - 如果您的听众中有较慢的计算机，请务必在较慢的计算机上进行测试。