빠르고 반응이 빠른 대화식 차트 / 그래프 : SVG, Canvas, 기타?

빠르고 반응이 빠른 대화식 차트 / 그래프 : SVG, Canvas, 기타?

---

기본적으로 확대 / 축소 가능, 패닝 가능 그래프에서 수천 점을 렌더링하는 프로젝트를 업데이트하는 데 사용할 올바른 기술을 선택하려고합니다. Protovis를 사용한 현재 구현은 성능이 떨어집니다. 여기에서 확인하십시오.

http://www.planethunters.org/classify

완전히 축소하면 약 2000 포인트가 있습니다. 아래쪽의 핸들을 사용하여 조금 확대 한 다음 드래그하여 이동하십시오. 컴퓨터가 매우 빠르지 않으면 코어가 고르지 않으며 CPU 사용량이 한 코어에서 최대 100 %까지 증가 할 수 있습니다. 초점 영역이 변경 될 때마다 다시 그리기를 호출하여 상당히 느리며 더 많은 점이 그려 질수록 악화됩니다.

애니메이션 및 상호 작용에보다 신속하게 반응하도록 기본 시각화 기술을 변경하고 인터페이스를 업데이트하고 싶습니다. 다음 기사에서 다른 SVG 기반 라이브러리 또는 캔버스 기반 라이브러리 중 하나를 선택하는 것 같습니다.

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

Protovis 에서 자란 d3.js는 SVG 기반이며 애니메이션 렌더링에 더 적합합니다 . 그러나 나는 성능이 얼마나 우수하고 성능 상한이 무엇인지에 대해 모호합니다. 이런 이유로 KineticJS 와 같은 캔버스 기반 라이브러리를 사용하여보다 완벽한 검사를 고려하고 있습니다 . 그러나 하나의 접근 방식을 사용하기 전에 너무 많은 데이터로 비슷한 웹 응용 프로그램을 수행 한 사람의 의견을 듣고 의견을 얻고 싶습니다.

가장 중요한 것은 다른 상호 작용 기능을 쉽게 추가하고 애니메이션을 프로그래밍하는 데 중점을 둔 성능입니다. 한 번에 2000 개 이하의 포인트가있을 수 있으며 각각 작은 오류 막대가 있습니다. 확대, 축소 및 이동이 원활해야합니다. 가장 최근의 SVG 라이브러리가 이것에 적당하다면, d3 사용의 용이성은 KineticJS 등의 설정 증가보다 중요 할 것입니다. 그러나 캔버스를 사용하는 것, 특히 컴퓨터가 느린 사람들에게 큰 성능 이점이 있다면 확실히 그런 식으로 가고 싶습니다.

SVG를 사용하지만 여전히 원활하게 애니메이션이 적용되는 NYTimes에서 제작 한 앱의 예 : http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . 그 성능을 얻을 수 있고 내 자신의 캔버스 그리기 코드를 작성할 필요가 없다면 아마도 SVG로 갈 것입니다.

일부 사용자는 캔버스 렌더링과 결합 된 d3.js 조작 의 하이브리드를 사용했습니다 . 그러나 온라인에 대한 많은 문서를 찾을 수 없거나 해당 게시물의 영업 담당자와 연락 할 수 없습니다. 누구든지 이런 종류의 DOM-to-Canvas ( demo , code ) 구현 경험이 있다면 , 여러분의 의견을 듣고 싶습니다. 데이터를 조작하고 데이터를 렌더링하는 방법 (따라서 성능)을 사용자 정의 제어 할 수있는 좋은 하이브리드 인 것처럼 보이지만 DOM에 모든 것을로드해야하더라도 여전히 속도가 느려질 지 궁금합니다.

나는 이것과 비슷한 기존의 질문이 있다는 것을 알고 있지만, 똑같은 질문은 없습니다. 당신의 도움을 주셔서 감사합니다.

후속 조치 : 내가 사용한 구현은 https://github.com/zooniverse/LightCurves에 있습니다.

---

다행히도 2000 개의 원을 그리는 것은 테스트하기 매우 쉬운 예입니다. 다음은 Canvas와 SVG 각각 두 가지 가능한 구현입니다.

• 캔버스 기하학적 확대
• 캔버스 시맨틱 줌
• SVG 기하학적 줌
• SVG 시맨틱 줌

이 예제는 D3의 줌 동작 을 사용하여 줌 및 패닝을 구현합니다. 원이 Canvas에서 렌더링되는지 SVG에서 렌더링되는지 외에 다른 주요 차이점은 기하학적 또는 의미 확대 / 축소 를 사용하는지 여부 입니다.

기하 확대 / 축소는 전체 뷰포트에 단일 변환을 적용 함을 의미합니다. 확대하면 원이 커집니다. 대비 의미 론적 확대 / 축소는 각 원에 개별적으로 변형을 적용한다는 것을 의미합니다. 확대하면 원의 크기는 동일하게 유지되지만 퍼집니다. Planethunters.org는 현재 시맨틱 줌을 사용하지만 다른 경우를 고려하는 것이 유용 할 수 있습니다.

기하학적 확대 / 축소를 사용하면 구현이 간단 해집니다. 변환 및 배율을 한 번 적용한 다음 모든 원을 다시 렌더링합니다. SVG 구현은 특히 단순하여 단일 "변환"속성을 업데이트합니다. 두 가지 기하학적 확대 / 축소 예제의 성능은 충분하다고 생각합니다. 시맨틱 줌의 경우 D3이 Protovis보다 훨씬 빠릅니다. 각 확대 / 축소 이벤트에 대해 훨씬 적은 작업을 수행하기 때문입니다. (Protovis 버전은 모든 요소의 모든 속성을 다시 계산해야합니다.) 캔버스 기반 시맨틱 줌은 SVG보다 약간 까다 롭지 만 SVG 시맨틱 줌은 여전히 ​​반응합니다.

그러나 성능에 대한 마법의 총알은 없으며이 네 가지 가능한 접근 방식은 전체 가능성을 다루기 시작하지 않습니다. 예를 들어, 패닝 ( "변환"속성 업데이트)에 대한 기하학적 접근 방식을 사용하여 확대 / 축소하는 동안 개별 원만 다시 그릴 수 있습니다. 이러한 기술 중 하나 이상을 CSS3 변환과 결합하여 일부 하드웨어 가속을 추가 할 수도 있습니다 ( 계층 적 에지 번들링 예제 에서처럼 ). 시각적 인 인공물을 구현하기가 까다로울 수 있지만.

그래도 개인적으로 선호하는 것은 SVG를 최대한 유지하고 렌더링이 병목 현상 일 때 "내부 루프"에 대해서만 Canvas를 사용하는 것 입니다. SVG는 CSS, 데이터 조인 및 요소 관리자와 같은 개발 편의성이 너무 많아서 Canvas로 시작하는 것이 조기에 최적화되는 경우가 많습니다. 링크 한 Facebook IPO 시각화에서와 같이 Canvas와 SVG를 결합하면 최상의 성능을 유지하면서 이러한 편의성을 대부분 유지할 수있는 유연한 방법입니다. 또한 Cubism.js에서도이 기술을 사용했습니다 . 여기서 시계열 시각화의 특수 사례가 비트 맵 캐싱에 적합합니다.

이 예제에서 알 수 있듯이 D3의 일부가 SVG에 특정한 경우에도 Canvas와 함께 D3을 사용할 수 있습니다. 이 힘 지향 그래프 와이 충돌 감지 예제 도 참조하십시오 .

---

나는에 생각 귀하의 경우에는 캔버스와 SVG 사이의 결정 사이 없음»»포르셰를«말을«타고 또는 운전 결정처럼되지 않습니다. 나를 위해 그것은 자동차 색상에 대한 결정과 더 비슷합니다.

설명하겠습니다 : 프레임 워크를 기반으로 작업을 가정하면

• 별을 그리고
• 별을 추가하고
• 별을 제거하다

선형 시간이 걸립니다. 따라서 프레임 워크에 대한 결정이 좋으면 조금 빠릅니다. 그렇지 않으면 조금 느립니다.

If you go on assuming that the framework is just fast, than it becomes totally obvious that the lack of performance is caused be the high amount of stars and handling them is something none of the frameworks can do for you, at least I do not know about this.

What I want to say is that the base of the problem leads to a basic problem of computational geometry, namely: range searching and another one of computer graphics: level of detail.

To solve your performance problem you need to implement a good preprocessor which is able to find very fast which stars to display and is perhaps able to cluster stars which are close together, depending on the zoom. The only thing that keeps your view vivid and fast is keeping the number of stars to draw as low possible.

As you stated, that the most important thing is performance, than I would tend to use canvas, because it works without DOM operations. It also offers the opportunity to use webGL, what increases graphic performance a lot.

BTW: did you check paper.js? It uses canvas, but emulates vector graphics.

PS: In this Book you can find a very detailed discussion about graphics on the web, the technologies, pros and cons of canvas, SVG and DHTML.

---

I recently worked on a near-realtime dashboard (refresh every 5 seconds) and chose to use charts that render using canvas.

We tried Highcharts(SVG based JavaScript Charting library) and CanvasJS(Canvas based JavaScript Charting library). Although Highcharts is a fantastic charting API and offers way more features we decided to use CanvasJS.

We needed to display at least 15 minutes of data per chart (with option to pick range of max two hours).

So for 15 minutes: 900 points(data point per second) x2(line and bar combination chart) x4 charts = 7200 points total.

Using chrome profiler, with CanvasJS the memory never went above 30MB while with Highcharts memory usage exceeded 600MB.

Also with refresh time of 5 seconds CanvasJS rendering was allot more responsive then Highcharts.

We used one timer (setInterval 5 seconds) to make 4 REST API calls to pull the data from back end server which connected to Elasticsearch. Each chart updated as data is received by JQuery.post().

That said for offline reports I would go with Highcharts since its more flexible API.

There's also Zing charts which claims to use either SVG or Canvas but haven't looked at them.

Canvas should be considered when performance is really critical. SVG for flexibility. Not that canvas frameworks aren't flexible, but it takes allot more work for canvas framework to get the same functionality as an svg framework.

---

Might also look into Meteor Charts, which is built on top of the uber fast KineticJS framework: http://meteorcharts.com/

참고URL : https://stackoverflow.com/questions/12310024/fast-and-responsive-interactive-charts-graphs-svg-canvas-other