在 Javascript 中渲染大矩阵 (1000*1000)答案

【问题标题】：Render large matrix (1000*1000) in Javascript在 Javascript 中渲染大矩阵 (1000*1000)
【发布时间】：2012-03-13 08:57:00
【问题描述】：

我需要在我们的基于 Web 的应用程序中显示一个大矩阵。矩阵尺寸约为。 1000*1000，每个单元格要么填充要么不填充。

基本上，它应该看起来像这样（大得多且没有颜色）： http://mbostock.github.com/protovis/ex/matrix.html

我需要基本的交互，例如缩放和单击单元格。该矩阵很可能是一个稀疏矩阵。

我尝试过 Protovis，但如果矩阵大于 80*80，则渲染需要很长时间。

什么 Javascript 库可能适合这项任务？

【问题讨论】：

我不确定是否会有开箱即用的渲染功能。您正在谈论 Web 浏览器要考虑的大量 DOM 元素。您可能必须从您指出的 Protovis 之类的东西开始，然后滚动您自己的缩放/数据建模来了解您正在谈论的内容。不想让派对崩溃，我也不是最了解 js 库的人，但这是我的预感。

标签： javascript matrix rendering visualization protovis

【解决方案1】：

您可以尝试 JavaScript 库 clustergrammer.js（请参阅 https://github.com/cornhundred/clustergrammer.js）。它使用 D3.js 制作交互式（可缩放、可重新排序、可过滤等）可视化。它可以处理大约 100,000 个数据点，但是如果您的矩阵足够稀疏，那么您可以渲染大型矩阵。

这是一个使用 clustergrammer.js 可视化 6000x230 矩阵的示例http://amp.pharm.mssm.edu/clustergrammer/viz/568affd5b6541b84f3a68234

【讨论】：

仅链接的答案不是 SO 的方式。链接可能有一天会过时。在你的答案中加入重要信息！

【解决方案2】：

我会使用 HTML5 Canvas 进行快速绘图。（这个super-simple demo在我的电脑上会在几秒钟内呈现出来。）如果你想放大，你可以see this answer。

【讨论】：

谢谢，真的很有帮助

【解决方案3】：

为了向用户显示一百万个项目，每个元素可能必须是单个像素的大小。

我只会使用canvas。

【讨论】：