Рендеринг большой матрицы (1000 * 1000) в Javascript

Question

Мне нужно отобразить большую матрицу в нашем веб-приложении. Размеры матрицы ок. 1000 * 1000 и каждая ячейка либо заполнена, либо нет.

По сути, это должно выглядеть так (намного больше и без цветов): http://mbostock.github.com/protovis/ex/matrix.html

Мне нужно базовое взаимодействие, такое как масштабирование и нажатие на ячейку. Матрица, вероятно, будет разреженной матрицей.

Я пробовал Protovis, но рендеринг длится вечно, если матрица больше 80 * 80.

Какая библиотека Javascript может подойти для этой задачи?

Answer 1

Я бы использовал HTML5 Canvas для быстрого рисования. (Это супер-простая демонстрация отображается на моем компьютере за несколько секунд.) Если вы хотите увеличить масштаб, вы можете увидеть этот ответ .

Answer 2

Чтобы отобразить миллион элементов пользователю, каждый элемент должен иметь размер в один пиксель.

Я бы просто использовал canvas .

Answer 3

Вы можете попробовать библиотеку JavaScript clustergrammer.js (см. https://github.com/cornhundred/clustergrammer.js). Он использует D3.js для создания интерактивных (масштабируемых, переупорядочиваемых, фильтруемых и т. Д.) Визуализаций. Он может обрабатывать порядка 100 000 точек данных, но если ваша матрица достаточно разрежена, вы можете визуализировать большие матрицы.

Вот пример clustergrammer.js, который используется для визуализации матрицы 6000x230 http://amp.pharm.mssm.edu/clustergrammer/viz/568affd5b6541b84f3a68234