d3.js 无法可视化大型数据集
d3.js not being able to visualiza a large dataset
我需要一些关于使用 d3.js 可视化大数据的建议。我正在从 hbase 中提取数据并存储在 json 文件中，以便使用 d3.js 进行可视化。当我提取几个小时的数据时，json 文件的大小约为 100MB，可以通过 d3.js 轻松可视化，但使用 dc.js 和交叉过滤器的过滤速度有点慢。但是当我拉取 1 周的数据集时，json 文件大小超过 1GB 并尝试使用 d3.js、dc.js 和交叉过滤器进行可视化，然后可视化无法正常工作并且过滤是也不可能。谁能告诉我是否有好的解决方案，或者我需要在不同的平台而不是 d3 上工作？
正如@Mark 所说，canvas 与 DOM 渲染是一回事。可以肯定的是，Web 可视化中最大的开销是 DOM 个元素。
但是，在某种程度上，crossfilter 可以通过将数据聚合到较少数量的视觉元素中来缓解这种情况。它可以让您了解数十万行数据。 1GB 可能会推动它，但 100 兆字节是可能的。
但是您确实需要知道您在哪个级别聚合。因此，例如，如果它是一周的时间序列数据，则按小时分桶可能是一种合理的可视化方式，因为 7*24 = 168 点。你实际上无法感知更多的点，所以要求浏览器绘制数千个元素是没有意义的。
我完全同意马克和戈登之前所说的。但我必须添加我在过去几个月中学到的知识，因为我扩展了一个 dc.js 仪表板来处理相当大的数据集。
如前所述，一个瓶颈是当数据集转化为数千个 SVG/DOM 或 Canvas 元素时，数据集的 大小 。 Canvas 在浏览器上更轻便，但内存中仍有大量元素，每个元素都有其属性、点击事件等。
第二个瓶颈是数据的复杂性。 dc.js的响应能力不仅取决于d3.js，还取决于crossfilter.js。如果您检查 the Crossfilter example dashboard，您会发现他们使用的数据量相当可观：超过 230000 个条目。然而，这些数据的复杂性相当低：每个条目只有五个变量。保持数据集简单有助于扩大规模。请记住，这里每个条目有五个变量意味着在可视化期间浏览器内存中有大约一百万个值。
最后一点，您提到您以 JSON 格式提取数据。虽然这在 Javascript 中非常方便，但解析和验证大 JSON 文件要求很高。此外，它不是最紧凑的格式。 Crossfilter example data 被格式化为一个非常简单和紧凑的 CSV 文件。
总而言之，您必须在数据的 大小 和 复杂性 之间找到最佳平衡点。一百万个数据值（大小 倍 复杂度）是完全可行的。将其提高一个数量级，您的应用程序 可能 仍然可用。
我需要一些关于使用 d3.js 可视化大数据的建议。我正在从 hbase 中提取数据并存储在 json 文件中，以便使用 d3.js 进行可视化。当我提取几个小时的数据时，json 文件的大小约为 100MB，可以通过 d3.js 轻松可视化，但使用 dc.js 和交叉过滤器的过滤速度有点慢。但是当我拉取 1 周的数据集时，json 文件大小超过 1GB 并尝试使用 d3.js、dc.js 和交叉过滤器进行可视化，然后可视化无法正常工作并且过滤是也不可能。谁能告诉我是否有好的解决方案，或者我需要在不同的平台而不是 d3 上工作？
正如@Mark 所说，canvas 与 DOM 渲染是一回事。可以肯定的是，Web 可视化中最大的开销是 DOM 个元素。
但是，在某种程度上，crossfilter 可以通过将数据聚合到较少数量的视觉元素中来缓解这种情况。它可以让您了解数十万行数据。 1GB 可能会推动它，但 100 兆字节是可能的。
但是您确实需要知道您在哪个级别聚合。因此，例如，如果它是一周的时间序列数据，则按小时分桶可能是一种合理的可视化方式，因为 7*24 = 168 点。你实际上无法感知更多的点，所以要求浏览器绘制数千个元素是没有意义的。
我完全同意马克和戈登之前所说的。但我必须添加我在过去几个月中学到的知识，因为我扩展了一个 dc.js 仪表板来处理相当大的数据集。
如前所述，一个瓶颈是当数据集转化为数千个 SVG/DOM 或 Canvas 元素时，数据集的 大小 。 Canvas 在浏览器上更轻便，但内存中仍有大量元素，每个元素都有其属性、点击事件等。
第二个瓶颈是数据的复杂性。 dc.js的响应能力不仅取决于d3.js，还取决于crossfilter.js。如果您检查 the Crossfilter example dashboard，您会发现他们使用的数据量相当可观：超过 230000 个条目。然而，这些数据的复杂性相当低：每个条目只有五个变量。保持数据集简单有助于扩大规模。请记住，这里每个条目有五个变量意味着在可视化期间浏览器内存中有大约一百万个值。
最后一点，您提到您以 JSON 格式提取数据。虽然这在 Javascript 中非常方便，但解析和验证大 JSON 文件要求很高。此外，它不是最紧凑的格式。 Crossfilter example data 被格式化为一个非常简单和紧凑的 CSV 文件。
总而言之，您必须在数据的 大小 和 复杂性 之间找到最佳平衡点。一百万个数据值（大小 倍 复杂度）是完全可行的。将其提高一个数量级，您的应用程序 可能 仍然可用。