Protovis gegen D3.js.

84

TLDR: Hat jemand Erfahrung mit Protovis und D3.js, um die Unterschiede zwischen den beiden zu beleuchten?

Ich habe in den letzten 2 Wochen mit Protovis gespielt und es war bisher großartig. Außer jetzt scheine ich mit Animation ein bisschen gegen eine Mauer gestoßen zu sein.

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

Ich möchte eine recht einfache Animation machen, aber mit Protovis fühlt es sich weniger als intuitiv an - ich fange an zu denken, dass Protovis nie wirklich für Animation gedacht war. Also fing ich an, mir D3.js anzuschauen:

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

Es sieht sehr ähnlich aus, aber:

  • Scheint leichter zu sein
  • Scheint darauf ausgerichtet zu sein, mit anderen DOM-Elementen sowie SVG zu interagieren
  • Scheint darauf ausgerichtet zu sein, Animationen hinzuzufügen

Kann jemand andere Unterschiede beleuchten?

Ich wäre für jede Eingabe sehr dankbar

Von Richard Powell
quelle

Antworten:

117

Ich habe ziemlich viel mit Protovis und ein paar Dinge mit D3 gearbeitet. Zusätzlich zu den Punkten, die Sie erwähnen, fallen mir folgende Unterschiede auf:

  • Wenn Protovis eine vereinfachte Abstraktionsschicht zwischen den von Ihnen angegebenen visuellen Eigenschaften bietet, verwendet D3 die tatsächlichen CSS- und DOM-Spezifikationen - also anstelle von .width(10)oder würden .fillStyle('#00C')Sie .style('width', 10)oder verwenden .attr('fill', '#00C'). In diesen Beispielen ist der Unterschied ziemlich trivial, aber wenn Sie so etwas wie eine Linie in einem SVG-Bild zeichnen, gibt es große Unterschiede. Das Ergebnis ist, dass sich die Verwendung von D3 etwas niedriger anfühlt - Sie haben mehr Kontrolle, müssen jedoch mit der SVG-Syntax vertraut sein, um einige der Aufgaben von Protovis viel einfacher ausführen zu können.

  • Wie Sie bemerken, wird Protovis vollständig in SVG gerendert, während D3 andere Teile des DOM verwenden kann. Dies bedeutet, dass Sie für Visualisierungen, für die keine SVG-basierten visuellen Elemente erforderlich sind, D3 auch mit Browsern verwenden können, die SVG nicht unterstützen. Dies bedeutet auch, dass es viel einfacher ist, HTML und SVG in dieselbe Visualisierung zu integrieren, was für Dinge wie den Umgang mit Text sehr hilfreich ist (Textmanipulation und Layout sind in Protovis ziemlich schwach).

  • D3 ändert oder löscht einige der grundlegenden Protovis-Dienstprogramme wie Skalen und Datenmanipulation. Ich ärgere mich immer wieder darüber, dass grundlegende Dienstprogramme D3-Äquivalente mögen pv.sum()oder pv.mean()nicht haben, obwohl einige, wie .nest(), in beiden Bibliotheken gemeinsam genutzt werden. Bearbeiten 10/1/12: D3 hat seine Daten Dienstprogramme ausgefüllt, aber es gibt immer noch ein paar , die Protovis enthält und D3 nicht der Fall, zum Beispiel pv.dict, pv.numerateund pv.repeat. Vermutlich wurden sie weggelassen, weil sie als weniger allgemein nützlich angesehen wurden.

  • D3 bietet Dienstprogramme für asynchrone Anforderungen. Wenn ich dies in Protovis möchte, muss ich im Allgemeinen eine externe Bibliothek (dh jQuery) verwenden.

  • Die D3-API-Dokumentation ist im Vergleich zu recht detaillierten Dokumenten für Protovis fast vollständig unvollständig. Bearbeiten (30.08.13) : D3 verfügt jetzt über eine vollständige und detaillierte API-Dokumentation zu GitHub , sodass dieser Punkt nicht mehr relevant ist.

  • Schließlich habe ich nicht viel mit Animation gemacht, aber ich denke, Sie haben völlig Recht - D3 bietet mehr Animationsunterstützung als Protovis, insbesondere in Bezug auf animierte Übergänge. Protovis kann einen Teil oder die gesamte Visualisierung bei Bedarf neu rendern, unterstützt jedoch nicht das Durchlaufen einer Animation mit begrenzter Dauer - Sie müssten alles von Hand mit codieren setInterval. D3 scheint dies zu einem viel wesentlicheren Bestandteil der Bibliothek zu machen.

Bearbeiten (7/12/11) : Es sieht so aus, als gäbe es einen neuen großen Unterschied: Ab dem 28. Juni 2011 befindet sich Protovis nicht mehr in der aktiven Entwicklung, und das Protovis-Team drängt stattdessen auf D3.js. Die letzte Version ist ziemlich stabil, daher sollte dies Sie nicht daran hindern, sie zu verwenden, aber es ist definitiv ein zu berücksichtigender Punkt.

nrabinowitz
quelle
Ziemlich richtig, bis auf den dritten Punkt. Sie können eine Protovis-Grafik in ein beliebiges HTML-Element einbetten.
Geoff
@ Jeff - Ich habe den Fall möglicherweise überbewertet. Mein Punkt war , dass D3 ist vorgesehen , um die Arbeit mit beliebigen Elementen, während dies mit Protovis (AFAIK) erfordert außerhalb des etablierten API arbeiten (zB durch die Root - Einstellung $domEigenschaft). Ich werde diesen Punkt abschwächen.
Nrabinowitz
1
@ Jeff - Beim zweiten Gedanken habe ich diesen Punkt völlig verworfen - irgendwie hatte ich das Panel#canvasAnwesen nie bemerkt . Danke für den Hinweis.
nrabinowitz
Vielen Dank für die ausführliche Antwort - das war wirklich hilfreich
Von Richard Powell
2
Seit März 2013 scheint die API-Referenz für Version 3 von D3 vollständig zu sein und macht einen wirklich guten Eindruck. Darüber hinaus gibt es eine gute Dokumentation mit vielen Tutorials und schönen Beispielen.
Mobiletainment
32

Es gibt ein Tutorial, das die Unterschiede zwischen D3 und Protovis ausführlich behandelt. Ich stimme der Beschreibung von @ nrabinowitz zu, möchte jedoch darauf hinweisen, dass wir kürzlich eine umfangreiche API-Dokumentation hinzugefügt haben .

mbostock
quelle
1
Ja, das habe ich gestern gerade bemerkt (sehr geschätzt!). Ich werde meine Antwort für die Nachwelt aktualisieren :).
Nrabinowitz
6

Es ist ein neues Papier aus den Autoren von Protovis / d3.js 2011 veröffentlicht http://vis.stanford.edu/files/2011-D3-InfoVis.pdf hauptsächlich über d3.js aber einige der Gründe enthalten , warum sie geändert bestimmte Dinge auf dem Weg von Protovis nach d3.js.

Pintxo
quelle
Ich fand das Papier nützlich . Ohne jede Prüfung zu tun, gibt es mir eine Anerkennung von wo es funktioniert und wo es unvollkommen. Vielen Dank.
Mike Gale