2013-03-05 8 views
50

d3과 Raphael 모두에게 매료되었습니다. 나는 Raphael이 D3의 위에 구축 된 이고 그것은 크로스 브라우저 호환이지만 어느 시나리오에 더 적합한 지 잘 모르겠다. 누군가 빛을 비춰 주실 수 있습니까? 즉각적인 유스 케이스는 잠재적으로 SIMILE 타임 라인을 사용하고 상태 다이어그램과 통합합니다 (d3/Raphael을 사용하려는 경우). 감사!D3.js v Raphael.js

+7

라파엘은 D3 위에 구축 되었습니까? 나는 그것이 확실하지 않습니다. – Dve

답변

41

라파엘은 D3에 내장되어 있지 않습니다.

라파엘은 요소를 그릴 때 도움이됩니다. D3은보다 포괄적이며 데이터를 요소에 바인딩하는 데 도움이됩니다. 그래서 저는 D3가 더 강력하다고 말하고 싶습니다. This forum discussion D3을 사용하여 SIMILE 타임 라인을 표시하는 방법은 D3에서 타임 라인을 구현하는 this project을 참조하십시오. 그래서 언뜻보기에 D3가 당신의 대답입니다.

그러나 SIMILE 타임 라인을 처리하는 D3의 위젯이없는 것 같으면 Raphael 또는 D3 중 하나를 선택하는 것이 좋습니다. 즉, D3가 Internet Explorer의 이전 버전과 잘 작동하지 않는다는 것을 제외하면, this article.에 설명되어 있습니다. 따라서 이전 버전의 IE를 지원해야하는 경우 Raphael을 사용하는 것이 좋습니다.

26

D3는 Raphael보다 배우기가 훨씬 어렵지만 두 경우 모두 더 나은 애니메이션을 만들려면 SVG를 배워야합니다. 반면에 D3 시각화는 이미 많은 프리 패키징 된 레이아웃이 있으므로 유사한 Processing 또는 Raphael 예제보다 수학이 덜 필요합니다.

D3은 현재 웹 표준 스택 (HTML, DOM - 당신이 그것을 싫어하더라도 CSS, SVG, Canvas를 사용해야 함)을 기반으로합니다. 데이터 작업을위한 라이브러리입니다. 알고리즘과 레이아웃 (힘 레이아웃, 스택 레이아웃, 나무 등)의

  • t,
  • 몇 가지 기본적인 데이터
  • 에 의해 기능 (중첩, 크로스, 그룹 논쟁 : 는 데이터 프레임 워크이기 때문에, D3는 함께 포장되어 제공 ,
  • jQuery를 스타일의 선택,
  • 또한 시각화 프리미티브 (d3.svg 당신이 간단한 그래픽에 필요한 모든 것을 제공) http://bl.ocks.org/phoebebright/raw/3176159/) : -, 롤업이 예제를 참조하십시오.

d3은 많은 경우 Raphael 및 Processing보다 우수하지만 jQuery, underscore.js 및 기타 프레임 워크를 대체 할 수 있습니다. 그 위에 차트 라이브러리가 많이 있으므로 항상 멋진 차트를 드래그 앤 드롭하고 데이터 래퍼를 다시 작성할 수 있습니다. 공공 부문 컨설턴트로 http://biovisualize.github.com/d3visualization/#visualizationType=timeline

+2

d3는 jquery가 호환성 레이어 역할을 소유하고있는 반면 d3은 브라우저 호환성에 대한 소유권을 주장하지 않으므로 d3은 jquery를 대체 할 수 없습니다. – Core

+0

분명히 맞지만, 특정 제품의 관리자/개발자가 결정한 사항에 따라 다릅니다. 브라우저 호환성에 관심이 없다면 d3도 jQuery, 밑줄 또는 다른 도구를 대체하기 쉽습니다. – paxRoman

10

나는 라파엘을 학습 나의 클라이언트의 이전 버전을 사용하는 많은 시간 이후 나에게 더 나은 투자 것을 발견했습니다

이 인터페이스를 사용하여 좋은 타임 라인의 예를 찾을 수 있습니다 브라우저. 현재 고객은 IE7을 독점적으로 사용하며 Raphael은 완벽하게 작동하며 D3은 완벽하게 작동하지 않습니다.

개인적으로 나는 D3을 사용하고 싶지만 전문적으로는 내 상황의 현실이 아닙니다.

+2

여전히 D3을 많이 사용할 수없는 경우입니까? – Nikos

15

둘 다 다른 동물입니다.

RaphaelJS은 SVG 및 VML을 기반으로하는 벡터 그래픽의 기능을 단순화하고 확장합니다.

D3js 그냥 DOM을 조작하고 그리기 위해 그래픽 표준 (SVG 및 Canvas, 바 그래프에서는 DIV도 사용할 수 있음)에 의존합니다. 예를 들어 d3.svg.symbol()d 매개 변수의 내용을 반환하여 SVG의 path 요소로 전달하지만 심볼은 그 자체로 그려지지 않습니다.

당신은 데이터를 조작하고 라파엘와 함께 그릴 D3js를 사용할 수 있습니다.

This blog

D3js + 라파엘을 결합하는 방법을 설명합니다. 그리고 D3 for Raphael 구현도 확인하십시오.