2013-06-20 21 views
15

Sto lavorando a un progetto che combina tutte le visualizzazioni d3.js con backbone.js in un'applicazione a singola pagina. Poiché ho molte visualizzazioni come grafico a barre, grafico a torta e così via, mi chiedevo quale sia l'approccio migliore a questo problema.Combinazione di d3.js e backbone.js

Ad esempio, diciamo che ho due grafici a barre e un grafico a torta. Dovrei mettere tutti i margini impostati, ridimensionare, rendere tutti i dati per tutti i grafici insieme in una vista? Dato che ci sono due diversi tipi di grafici, quale dovrebbe essere il modello?

Cosa deve andare a Visualizza, Modello, Controller, Collezione e così via?

Grazie in anticipo,

+0

Questo è molto vago. Dovrai essere più specifico per ottenere una buona risposta. –

+0

Ciò che dovrebbe andare in Visualizza, Modello, Controller e Collezione non dovrebbe essere diverso da qualsiasi altra applicazione per singola pagina. Non ha nulla a che fare con d3, grafico a barre, grafico a torta e così via. – ricksuggs

+0

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

risposta

22

ho guardato in combinando D3 e Backbone un po 'e ci sono un paio di soluzioni esistenti là fuori:

Overview presentation

Short tutorial on combining Backbone & D3

Longer discussion on marrying Backbone and D3

A bunch of JS libraries for integrating with D3

ho trovato anche una biblioteca su GitHub, ma non sembrano essere supportati ...

Alla fine, nessuno di questi mi ha davvero soddisfatto così ho sviluppato i miei modelli di backbone, collezioni & vista. Ho impostato:

ChartPoint Modello - X & Y coordinare e un'etichetta punto

ChartSeries Collection - Collezione di ChartPoints che definiscono il grafico completo

ChartBaseView - Una vista che interpreta i dati di cui sopra, gestisce eventi , disegna assi e altre funzioni generali

BarChartView, LineChartView, PieChartView, ecc. - Viste specifiche per il rendering del tipo di grafici che si desidera. La maggior parte del tuo codice D3 va qui.

Non dire che questo è il modo "giusto" per farlo ... solo il mio modo.

+1

Questo suona come un'eccellente astrazione di alto livello: potresti pubblicare un elenco che mostri l'implementazione del modello e lo pseudo-codice che esemplifica le interazioni tra questi e gli altri componenti? – Barney

+2

Questo è quello che stai cercando: http://bl.ocks.org/milroc/5522467 – c0mrade