2013-06-20 16 views
15

Ich arbeite an einem Projekt, das alle d3.js Visualisierungen mit backbone.js in einer einzigen Seite Anwendung kombiniert. Da ich viele Visualisierungen wie Balkendiagramm, Tortendiagramm usw. habe, habe ich mich gefragt, was der beste Ansatz für dieses Problem ist.Kombinieren von d3.js und backbone.js

Zum Beispiel sagen wir, ich habe zwei Balkendiagramme und ein Kreisdiagramm. Soll ich alle gesetzten Ränder, Skalen, alle Daten für alle Diagramme zusammen in einer Ansicht rendern? Da es zwei verschiedene Arten von Graphen gibt, was sollte das Modell sein?

Was sollte zu Ansicht, Modell, Controller, Sammlung und so weiter gehen?

Vielen Dank im Voraus,

+0

Dies ist sehr vage. Sie müssen genauer sein, um eine gute Antwort zu bekommen. –

+0

Was in der Ansicht, im Modell, im Controller und in der Sammlung angezeigt wird, sollte sich nicht von anderen Einzelseitenanwendungen unterscheiden. Es hat nichts mit d3, Balkendiagramm, Kreisdiagramm und so weiter zu tun. – ricksuggs

+0

http://stackoverflow.com/questions/17050921/d3-with-backbone-d3-with-angular/17058009#17058009 –

Antwort

22

I in Kombination D3 und Backbone geschaut habe ein wenig und es gibt ein paar bestehenden Lösungen gibt:

Overview presentation

Short tutorial on combining Backbone & D3

Longer discussion on marrying Backbone and D3

A bunch of JS libraries for integrating with D3

ich auch eine Bibliothek auf GitHub gefunden, aber es schien nicht ... unterstützt werden

Am Ende keiner von ihnen erfüllt mich wirklich so entwickelte ich meine eigene Backbone-Modelle, Sammlungen & Ansichten. I ein:

ChartPoint Model - X & Y-Koordinate und eine Punktbezeichnung

ChartSeries Collection - Collection of ChartPoints, die das volle Diagramm

ChartBaseView definieren, - eine Ansicht, die die obigen Daten interpretiert, Griffe Ereignisse Zeichnet Achsen und andere allgemeine Funktionen

BarChartView, LineChartView, PieChartView usw. - Spezifische Ansichten zum Rendern des gewünschten Diagrammtyps. Der größte Teil Ihres D3-Codes geht hierhin.

Nicht zu sagen, das ist der "richtige" Weg, es zu tun ... nur meinen Weg.

+1

Das hört sich nach einer exzellenten Abstraktion auf hoher Ebene an - könnten Sie einen Kern veröffentlichen, der die Implementierung des Modells und Pseudo-Codes zeigt, die die Interaktionen zwischen diesen und den anderen Komponenten veranschaulichen? – Barney

+2

Dies ist, was Sie suchen: http://bl.ocks.org/miloc/5522467 – c0mrade