Sto giocando con diversi modi di integrare d3 e angolare, nel contesto dell'apprendimento di entrambi questi framework, e spero in qualche input:
La mia applicazione client riceve una matrice JSON di nodi e una serie di bordi dal mio server. Il componente centrale del client è una visualizzazione di un grafico implementata come un layout d3 diretto alla forza: per ciascun nodo nella matrice di nodi, un elemento di cerchio (SVG) viene aggiunto a questa visualizzazione e le linee tra questi cerchi vengono aggiunte per ciascun bordo in la matrice dei bordi.
Ovviamente, d3 selection.data( ) rende banale aggiungere questi elementi e associare ciascuno ai dati che rappresenta, ma la visualizzazione del grafico è solo una parte di un'applicazione molto più grande: ho bisogno di creare diversi tipi di elementi che rappresentano questi stessi nodi e spigoli in diverse parti dell'applicazione (che d3 non ha nulla a che fare con), e mi piacerebbe mantenere tutti questi elementi legati a un singolo dataset.
Il mio obiettivo principale è ridurre al minimo la complessità del codice e, anche se mi sono innamorato della semplicità e dell'eleganza della funzionalità di data binding di d3, sono giunto alla conclusione provvisoria che l'utilizzo in una parte dell'applicazione mentre usare Angular per fare lo stesso in altre parti sta creando una complessità non necessaria e l'approccio più semplice sarebbe usare Angular per gestire l'associazione di dati / creazione di elementi
In altre parole, invece di usare selection.data( ).enter( ).append( ) per creare elementi SVG, penso che dovrei farlo usando ng-repeat="node in nodes" , forse creando la creazione di ciascuno come una direttiva personalizzata per consentire funzionalità personalizzate. Fatto ciò, avrei bisogno di ottenere questi elementi "in" d3, in modo che possano essere disposti sullo schermo e animati dalla sua forza -
Il mio ragionamento qui suona? In particolare, sono preoccupato che trascuro le complicazioni che questo creerà riguardo alla costanza degli oggetti, che è un requisito importante dato che i nodi entreranno, uscendo e spostando costantemente lo schermo e ho bisogno che queste transizioni siano fluide. Come consiglieresti di integrare i miei elementi creati in angolare in d3 (più precisamente, inserendoli nei miei array force.nodes{ } e force.links( ) ) per evitare tali complicazioni?
Infine, sto anche considerando una strategia che spero possa darmi il meglio di entrambi i mondi: potrei usare d3 per creare i miei elementi SVG e collegarli al loro rispettivo dato, ma piuttosto che eseguire quel codice in la funzione link della direttiva di visualizzazione (come ho fatto, e come tutte le esercitazioni ng / d3 che ho trovato), potrei eseguirla nella funzione compile , e fare qualcosa del genere:
d3.select('SVG').selectAll('.node').data('nodeDataArray')
.enter( ).append('circle').attr("class", "node-icon"); //...other attributes/styles etc
dove node-icon è il nome normalizzato di una direttiva con una proprietà restrict che include C . Se questo viene eseguito nel metodo di compilazione, angular dovrebbe quindi compilare tutte queste direttive come di consueto, aggiungendo eventuali funzionalità aggiuntive / interfacce con altre direttive (ecc.), Allo stesso modo con qualsiasi altro tipo di elemento. Giusto?
Questa è l'opzione che sono più attratto da intuitivamente - ci sono delle insidie che potrei trascurare, cosa che potrebbe rendere preferibile la precedente strategia?
NOTA: questa domanda è cross-postato su SO. So che il cross-posting è scoraggiato in generale, ma in questo caso non sono sicuro quale forum sia la sede più appropriata per questa domanda: Fa riferimento a implementazioni concrete, ma il nucleo della domanda riguarda i modelli generali di progettazione. Interpretato nel contesto di SO, penso che sia una domanda sull'implementazione. Interpretato in questo contesto, penso che sia una questione completamente diversa, che è il modo in cui ho giustificato il cross-posting. Non esitate a commentare se non siete d'accordo con questa giustificazione e considererò l'eliminazione della domanda.