D3：如何显示大型数据集答案

【问题标题】：D3: How to show large datasetD3：如何显示大型数据集
【发布时间】：2013-08-17 04:31:22
【问题描述】：

我有一个包含 10^5 个数据点的大型数据集。现在我正在考虑以下与大型数据集相关的问题：

是否有任何有效的方法来可视化非常大的数据集？就我而言，我有一个用户集，每个用户有 10^3 个项目。总共有 10^5 个项目。我想一次显示每个用户的所有项目，以便在用户之间进行快速比较。有人建议使用列表，但我不认为列表是处理这个大数据集时的唯一选择。

注意

我想一次显示每个用户的所有项目。

这意味着我想在点击用户时显示所有数据点，当我点击两个用途时，我可以比较那里数据点之间的差异。

【问题讨论】：

“高效”是什么意思？
时间效率。当数据量变大时，渲染需要相当长的时间，动态布局变得不可能。
这真的很模糊。你到底想做什么，你尝试了什么，为什么它不起作用？
您是说您想一直显示所有内容。我认为那里没有太多提高效率的空间，因为您需要渲染所有内容。
@LarsKotthoff 我认为渲染一个点比渲染一个矩形更有效。构建静态布局比动态布局更有效。所以我在处理大型数据集时要求合适的设计。尽管计算工作量有一个下限，但我们仍然可以比较不同的设计并选择一个合适的。

标签： d3.js large-data

【解决方案1】：

硬件加速图形是一个很好的数据可视化工具。

使用 LightningChart JS 可视化 100000 项散点图只需不到一秒。

const { lightningChart } = lcjs

const data = new Array(100000).fill(0).map(_ => ({ x: Math.random(), y: Math.random() }))

const tStart = Date.now()
const chart = lightningChart().ChartXY({disableAnimations: true})
const scatterSeries = chart.addPointSeries()
  .setPointSize(1)
  .add(data)
  
requestAnimationFrame(() => {
  const tEnd = Date.now()
  chart.setTitle(`${data.length} points visualization ready in ${((tEnd-tStart)/1000).toFixed(3)}s`)
})

<head>
<script src="http://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>
</head>

【讨论】：

这也是一项 1000 美元的订阅服务，没有任何可比的替代品。

【解决方案2】：

问题不在于渲染它们。您可以切换到 canvas 或 webgl 的渲染部分。您可以找到一些将 canvas 和 X3DOM 与 D3 数据绑定一起使用的示例。但由于 DOM 对象的数量，它会很慢，所以最好将它们分开，如parallel coordinates example。此示例还具有渐进式渲染功能，可加载和渲染所有数据元素。

将它们保存在内存中并在客户端操作它们也不是问题。 D3 经常与Crossfilter 一起使用，用于对“百万或更多记录”进行快速数据操作。

10^5 个数据点对于 SVG 交互式渲染来说有点太多了。但是可视化中的太多数据点通常暗示您有错误的抽象级别或错误的绘图策略。很多点可能会重叠或视觉融合。那么为什么不聚合这些形状，例如使用热图（重叠点数量的色标）、分箱（hexbin、直方图）或汇总数据集？

如果您想要的是概览和比较数据集，您可能需要抽象，例如一些汇总数据集的统计数据，然后按需查看详细信息（语义缩放、焦点+上下文、向下钻取）。

【讨论】：

这很成功：但可视化中的数据点过多通常暗示您有错误的抽象级别或错误的绘图策略.
是否应该在 Canvas/Webgl 上渲染解决这个问题，因为不会有 DOM 元素？