Protovis 대 D3.js


84

TLDR : protovis와 D3.js에 대한 경험이있는 사람이 있나요?

저는 지난 2 주 동안 protovis를 가지고 놀았고 지금까지 훌륭했습니다. 지금을 제외하고는 애니메이션으로 벽돌 벽에 약간 부딪친 것 같습니다.

protovis : http://vis.stanford.edu/protovis/

아주 간단한 애니메이션을 만들고 싶지만 protovis를 사용하면 직관적이지 않은 느낌이 듭니다. protovis가 실제로 애니메이션을위한 것이 아니라고 생각하기 시작했습니다. 그래서 D3.js를 살펴보기 시작했습니다.

http://mbostock.github.com/d3/ex/stack.html

매우 비슷해 보이지만 :

  • 더 가벼워 보인다
  • SVG뿐만 아니라 다른 DOM 요소와 상호 작용하도록 설계된 것 같습니다.
  • 애니메이션 추가에 맞춰진 것 같습니다.

누구든지 다른 차이점을 밝힐 수 있습니까?

모든 의견에 대해 매우 감사하겠습니다.

답변:


117

저는 Protovis로 상당한 양의 작업을 수행했고 D3로 몇 가지 작업을 수행했습니다. 언급하신 요점 외에도 다음과 같은 차이점이 눈에 띄는 것 같습니다.

  • 너무 대신 - Protovis 당신이 지정하고있는 시각적 속성과 단순화 된 추상화 계층을 제공하는 경우, D3는 실제 CSS와 DOM 스펙을 사용 .width(10)또는 .fillStyle('#00C')당신이 사용하는 것 .style('width', 10)또는 .attr('fill', '#00C'). 이 예에서 차이는 매우 사소하지만 SVG 이미지에 선을 그리는 것과 같은 작업을 수행 할 때 큰 차이가 있습니다. 그 결과 D3를 사용하면 좀 더 낮은 수준으로 느껴질 수 있습니다. 더 많은 제어 권한이 있지만 Protovis가 훨씬 더 쉽게 수행하는 일부 작업을 수행하려면 SVG 구문에 꽤 익숙해야합니다.

  • 아시다시피 Protovis는 모두 SVG로 렌더링되는 반면 D3는 DOM의 다른 부분을 사용할 수 있습니다. 즉, SVG 기반 시각적 요소가 필요하지 않은 시각화의 경우 SVG를 지원하지 않는 브라우저에서도 D3를 사용할 수 있습니다. 또한 동일한 시각화에서 HTML과 SVG를 통합하는 것이 훨씬 더 쉽다는 것을 의미합니다. 이는 텍스트 처리와 같은 작업에 매우 유용합니다 (텍스트 조작 및 레이아웃은 Protovis에서 매우 약함).

  • D3는 스케일 및 데이터 조작과 같은 기본 Protovis 유틸리티 중 일부를 변경하거나 삭제합니다. 나는 D3와 같은 기본 유틸리티 가 두 라이브러리에서 공유 되지만 같은 기본 유틸리티가 pv.sum()있거나 pv.mean()없는 것에 반복해서 짜증이납니다 .nest(). 편집 10/1/12는 : D3는 데이터 유틸리티를 작성하지만, Protovis가 포함 D3하지 않는, 예를 들면 것을 여전히 몇 가지가있다 pv.dict, pv.numerate하고 pv.repeat. 일반적으로 유용하지 않은 것으로 간주되어 제외 된 것으로 보입니다.

  • D3는 비동기 요청을위한 유틸리티를 제공합니다. Protovis에서 이것을 원할 때는 일반적으로 외부 라이브러리 (예 : jQuery)를 사용해야합니다.

  • D3 API 문서는 Protovis에 대한 매우 상세한 문서에 비해 불완전한 부분 이 거의 없습니다. 편집 (8/30/13) : D3는 이제 GitHub에 대한 완전하고 상세한 API 문서를 가지고 있으므로이 점은 더 이상 관련이 없습니다.

  • 마지막으로, 저는 애니메이션에 대해 많이 해보지 않았지만 완전히 옳다고 생각합니다. D3는 특히 애니메이션 전환 측면에서 Protovis보다 더 많은 애니메이션 지원을 제공합니다. Protovis는 필요에 따라 시각화의 일부 또는 전체를 다시 렌더링 할 수 있지만 제한된 기간의 애니메이션을 단계별로 진행할 수는 없습니다 setInterval.. D3는 이것을 라이브러리에서 훨씬 더 중요한 부분으로 만드는 것 같습니다.

편집 (7/12/11) : 2011 년 6 월 28 일부로 Protovis는 더 이상 활발하게 개발되지 않으며 Protovis 팀은 대신 D3.js를 푸시하고 있습니다. 마지막 릴리스는 매우 안정적이므로 사용하는 데 방해가되는 것은 아니지만 확실히 고려해야 할 사항입니다.


세 번째 점을 제외하고는 꽤 정확합니다. 임의의 HTML 요소에 Protovis 그래픽을 포함 할 수 있습니다.
Geoff

@Jeff-나는 사건을 과장했을 수 있습니다. 내 요점은 D3가 임의의 요소와 함께 작동 하도록 의도 된 반면 Protovis (AFAIK)를 사용하려면 설정된 API 외부에서 작업해야한다는 것입니다 (예 : 루트 $dom속성 설정 ). 그 점을 낮추겠습니다.
nrabinowitz 2011-06-03

1
@Jeff-두 번째 생각에, 저는 그 점을 완전히 버리고 있습니다-어떻게 든 나는 Panel#canvas재산을 알아 차리지 못했습니다 . 메모 감사합니다.
nrabinowitz 2011-06-03

자세한 답장을 보내 주셔서 감사합니다. 정말 도움이되었습니다.
Richard Powell 작성

2
2013 년 3 월부터 D3 v3에 대한 API 참조가 완성 된 것 같고 정말 좋은 인상을줍니다. 또한 많은 자습서와 멋진 예제가 포함 된 좋은 문서가 있습니다.
Mobiletainment 2013-06-20

32

D3와 Protovis 의 차이점을 자세히 다루는 튜토리얼이 있습니다 . @nrabinowitz의 설명에 동의하지만 최근에 광범위한 API 문서를 추가했음을 지적하겠습니다 .


1
예, 어제 그 사실을 알아 챘습니다 (정말 감사합니다!). 나는 후손에 대한 내 대답을 업데이트 할 것입니다. :).
nrabinowitz 2011-06-16

6

Protovis의 저자의 최근 용지가 / 2,011 출판 d3.js http://vis.stanford.edu/files/2011-D3-InfoVis.pdf을 주로 d3.js에 대해 있지만 몇 가지 이유를 들어 그들이 특정 변경 이유 Protovis에서 d3.js로가는 과정입니다.


나는 그 논문이 유용 하다는 것을 알았다 . 어떤 테스트를하지 않고, 그것은 나에게주는 감사 작동 어디 어디 그것의 불완전합니다. 감사.
Mike Gale 2012
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.