2012-02-22 6 views
1

웹 기반 애플리케이션에 큰 행렬을 표시해야합니다. 매트릭스 치수는 약입니다. 1000 * 1000이며 각 셀은 채워지거나 채워지지 않습니다.Javascript에서 큰 행렬 (1000 * 1000) 렌더링

기본적으로, (색상 훨씬 더 큰 및없이) 같이한다 : 나는 그런 확대 및 셀을 클릭로, 기본 상호 작용을 필요 http://mbostock.github.com/protovis/ex/matrix.html

. 행렬은 드문 드문 한 행렬입니다.

나는 Protovis를 사용해 봤지만 행렬이 80 * 80보다 큰 경우 렌더링에 오래 걸립니다.

이 작업에 적합한 Javascript 라이브러리는 무엇입니까?

+0

을 시각화하는 데 사용되는 clustergrammer.js의 예입니다. 당신은 웹 브라우저가 생각하고있는 DOM 요소의 * 많은 *에 대해 이야기하고 있습니다. Protovis와 같은 것으로 시작해야 할 수도 있습니다. 당신이 말하고자하는 것을 얻기 위해 줌/데이터 모델링을 시작하십시오. 파티를 중단하려하지 않고 js 라이브러리에 대해 가장 많은 정보를 얻지는 못했지만 그게 내 직감이었습니다. –

답변

4

사용자에게 백만 가지 항목을 표시하려면 각 요소가 단일 픽셀의 크기 여야합니다.

나는 단지 canvas을 사용합니다.

+0

+1 : 나는 "사용자에게 백만 가지 항목"에 관한 부분을 좋아합니다. –

4

빠른 그리기를 위해 HTML5 캔버스를 사용합니다. 이 super-simple demo은 내 컴퓨터에서 몇 초 만에 렌더링됩니다. 확대하려면 see this answer을 입력하면됩니다.

+0

감사합니다. 정말 도움이되었습니다. – Dobbylan

1

JavaScript 라이브러리 clustergrammer.js를 사용해 볼 수 있습니다 (https://github.com/cornhundred/clustergrammer.js 참조). D3.js를 사용하여 대화 형 (확대/축소, 재정렬, 필터링 등) 시각화를 만듭니다. 100,000 데이터 포인트의 순서로 처리 할 수 ​​있지만 행렬이 충분하지 않으면 큰 행렬을 렌더링 할 수 있습니다.

는 여기에 내가 상자 밖으로 직선 렌더링의 종류를 수행 하나있을거야 확실하지 해요 6000x230 매트릭스 http://amp.pharm.mssm.edu/clustergrammer/viz/568affd5b6541b84f3a68234

+0

링크 전용 답변은 방법이 아닙니다. 링크가 언젠가 오래되었을 수 있습니다. 당신의 대답에 필수적인 정보를 넣으십시오! – jogo