d3.js 无法可视化大型数据集

标签 d3.js dc.js crossfilter

我需要一些关于使用 d3.js 可视化大数据的建议。我从 hbase 提取数据并将其存储在 json 文件中,以便使用 d3.js 进行可视化。当我提取几个小时的数据时,json 文件的大小约为 100MB,可以通过 d3.js 轻松可视化,但使用 dc.js 和 crossfilter 进行过滤有点慢。但是,当我拉取 1 周的数据集时,json 文件大小变得超过 1GB,并尝试使用 d3.js、dc.js 和 crossfilter 进行可视化,然后可视化无法正常工作,过滤也无法实现。谁能给我任何想法是否有一个好的解决方案,或者我需要在不同的平台而不是 d3 上工作?

最佳答案

我绝对同意马克和戈登之前所说的话。但我必须补充过去几个月在扩展 dc.js 仪表板以处理相当大的数据集时学到的东西。

正如所指出的,一个瓶颈是数据集转换为数千个 SVG/DOM 或 Canvas 元素时的大小。 Canvas 在浏览器上更轻便,但内存中仍然有大量元素,每个元素都有其属性、点击事件等。

第二个瓶颈是数据的复杂性。 dc.js 的响应能力不仅取决于 d3.js,还取决于 crossfilter.js。如果您检查the Crossfilter example dashboard ,您会发现他们使用的数据量相当可观:超过 230000 个条目。然而,这些数据的复杂性相当低:每个条目只有五个变量。保持数据集简单有助于扩大规模。请记住,此处每个条目有 5 个变量意味着可视化期间浏览器内存中大约有 100 万个值。

最后一点,您提到您以 JSON 格式提取数据。虽然这在 Javascript 中非常方便,但解析和验证大型 JSON 文件要求相当高。此外,它不是最紧凑的格式。 Crossfilter example data格式为非常简单且紧凑的 CSV 文件。

总之,您必须找到数据的大小复杂性之间的最佳平衡点。一百万个数据值(大小乘以复杂性)是完全可行的。将其增加一个数量级,您的应用程序可能仍然可用。

关于d3.js 无法可视化大型数据集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29752539/

相关文章:

d3.js - D3 单调插值 - 平滑直线

javascript - DC.js双分组

javascript - 日历热图 dc.js

javascript - d3.js 强制布局图 : how to build the nodes object from scratch?

javascript - D3.js 在线图上的一条线后面添加一个阴影时间范围区域

Dc.js 将范围图表应用于多个图表

javascript - 在crossfilter dc js中应用除Others之外的多个过滤器

javascript - 两列上的单个交叉过滤器维度和组?

javascript - d3 : Text displayed when clicked on leaflet map

javascript - 具有单个键的多个值的 dc.js 散点图